Chrome, margins and jQuery animate - javascript

I'm having a weird display inconsistency with chrome and perhaps someone with cross-browser experience can shed light on it.
Fiddle: http://jsfiddle.net/Bio2hazard/DqCMY/
I've simplified the code as much as possible to dig down to the problem(s).
HTML ( Just a few images, really )
<div id="1" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="2" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="3" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="4" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="5" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
<div id="6" class="list_box">
<img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
width="184" height="69"/>
</div>
CSS
body {
background-color: #2d2d2b;
color: #939393;
}
.list_box {
margin-bottom: 2em;
display:inline-block;
width: 184px;
height: 69px;
overflow: hidden;
}
.testleft {
float: left;
}
.testright {
float: right;
}
JS ( The interesting part, probably )
$.fn.infoCardDisable = function () {
$('.active').stop().animate({
height: '69px',
marginBottom: '2em'
}, 400, function() {
$(this).removeClass('active');
$(this).children('.testleft').remove();
$(this).children('.testright').remove();
});
}
$('.list_box > .game_image').click(function (e) {
if ($(this).parent().hasClass('active')) {
$(this).infoCardDisable();
} else {
$(this).infoCardDisable();
$(this).parent().append('<span class="testleft">L.Test</span><span class="testright">R.Test</span>');
$(this).parent().addClass('active').stop().animate({
height: '103px',
marginBottom: '-2px'
}, 400);
}
return false;
});
The basic goal is to expand the list_box element downwards to reveal additional content when a image is clicked on. This action should not affect the positioning or flow of the content.
It works fine in both Firefox and IE, however chrome has all sorts of problems with it.
1) The float: left; and float:right; on the text causes the box to be awkwardly stuck higher up than any other element. Can be fixed by removing the floats, but I need them to position the elements.
2) The whole thing makes all elements around it jump around. This can be fixed by removing the display: inline-block from list_element but unfortunately that is not a option.
My tests were done on Firefox(18.0.1), Chrome(24.0.1312.52) and Internet Explorer(9.0.8).
Sooo... any ideas?

Chrome's default vertical-align behaves weirdly sometimes, you can solve it by explicitly setting it:
.list_box {
[...]
vertical-align: top;
}
Fiddle

Related

Need help adding rel to an img tag using js

I need help with some JS. I need to add rel="lightbox" to the main images of the code below so that these images will open in a lightbox. I grabbed this code from the inspector and this is being generated by a plugin so instead of editing the plugin files I'd like to add the rel code another way. I assume I can add this via JS but nothing I am finding is working. Any help would be appreciated.
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image1-1024x894.jpg" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="http://166.62.38.87/~saphotonics/wp-content/uploads/2019/05/SA-62H_image2-1008x1024.jpg" style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>
You need to do something like this:
const imgs = document.querySelectorAll('img.rsImg')
for(let img of imgs){
img.setAttribute('rel', 'lightbox');
}
The code is not tested, but I'm sure it'll guide you.
It looks like all of the images you want are tagged with the class "rsImg".
If this is the case, you can select all images with that class and add the "rel" attribute to them...
document.querySelectorAll('img.rsImg') // selects all "img" tags that have class "rsImg"
.forEach( // for each of the things selected, run the code here
n => n.setAttribute('rel', 'lightbox')
)
The following snippet runs that code, using your html from the question (with the images changed to placeholders) -- after it runs you can use your browser to inspect the element(s) and see that the rel attribute is added to each img.
document.querySelectorAll('img.rsImg').forEach(n => n.setAttribute('rel', 'lightbox'))
<div class="rsOverflow" style="width: 786px; height: 544px;">
<div class="rsContainer">
<div style="z-index:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage" src="//www.fillmurray.com/1024/894" style="width: 555px; height: 484px; margin-left: 115px; margin-top: 30px;">
</div>
</div>
<div style="z-index:0; display:none; opacity:0;" class="rsSlide ">
<div class="rsContent">
<img class="rsImg rsMainSlideImage"
src=" //www.fillmurray.com/1008/1024"
style="width: 477px; height: 484px; margin-left: 154px; margin-top: 30px;">
</div>
</div>
</div>
<div class="rsFullscreenBtn">
<div class="rsFullscreenIcn"></div>
</div>
</div>

CSS transparent colour overlay fade not working on iOS

I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears
I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap
I have managed to get this working on android but not on mobiles.
I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.
Js fiddle:
https://jsfiddle.net/49h450g9/
I am using bootstrap and less. My grid HTML code:
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
<h3>image 1</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">
<div class="overlay blue">
<h3>image 2</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
<h3>image 3</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
<h3>image 5</h3>
<hr>
<p><strong>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
<h3>Image 6</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
Solutions I have tried include:
adding
onclick=""
to the image wrap div element
2 adding the JS line to my js file:
$('body').bind('touchstart', function() {});
Adding the following js to my js file:
2 adding the JS line to my js file:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in
I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me
Any help would be massively appreciated :)
Thanks!
use :active pseudo class instead of :hover. In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.
similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.

mCustomScrollbar "scrollTo" not working in a single page application

I know that there are many questions like that, but I couldn't find a solution to my problem.
In my single page application(with metro style) when I go back from a widget to home I would like to set the scroll position back where it was before entering the widget.
<div id="overflow" class="mCustomScrollbar _mCS_9" style="width: 1855px;">
<div id="mCSB_9" class="mCustomScrollBox mCS-jmsHorizontalScrollbar mCSB_horizontal mCSB_inside" style="max-height: none;" tabindex="0">
<div id="mCSB_9_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px; width: 8360px;" dir="ltr">
<div class="page" id="dashboard_all" style="width: 8360px;">
</div>
</div>
<div id="mCSB_9_scrollbar_horizontal" class="mCSB_scrollTools mCSB_9_scrollbar mCS-jmsHorizontalScrollbar mCSB_scrollTools_horizontal" style="display: block;">
<div class="mCSB_draggerContainer">
<div id="mCSB_9_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 403px; max-width: 1805px; left: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</div>
This is the code that the plugin creates when I apply it to the div #overflow
$(document).ready(function() {
$("#overflow").mCustomScrollbar({
axis:"x",
theme:"jmsHorizontalScrollbar",
scrollButtons: {
enable: true
},
scrollInertia: 950,
callbacks:{
onScroll:function(){
//this functions sets the value in another js file. -(this.mcs.left) to get a positive value
getNavigator().setScrollLeft(-(this.mcs.left));
},
alwaysTriggerOffsets:false
}
});
})
Then I use the position found in the callback like that
$("#overflow").mCustomScrollbar("scrollTo",scrollLeft);
But nothing happens.
If I try to put a value like 3000, sometimes #overflow scrolls, but the scrollbar stays at the initial position.
Thank you in advance,
Matteo
I did it! I used the scrollTo method in the onUpdate callback
onUpdate:function(){
$("#overflow").mCustomScrollbar('scrollTo',position, {
// scroll as soon as clicked
timeout:0,
// scroll duration
scrollInertia:0,
});
}

Trying to rotate several divs over top of each other

I am sorry if this is covered somewhere else but I have not been able to find it. I am trying to create an area of my page with three <div>s that rotate on top of each other. I have written this css and code:
#block {
width:1202px;
height: 402px;
overflow: hidden;
margin: auto;
}
.content {
width:1200px;
height:400px;
margin: auto;
}
<div id="block">
<div class="content">
<a name=image1></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image2></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
<div class="content">
<a name=image3></a>
<img src="/images/imagea.jpg" alt="image1"/>
<img src="/images/button.png" alt="button" style="margin-left: 700px;margin-top: 300px; width:300px;height:75px;"/>
</div>
</div>
<table style="margin: auto; width:20px;">
<tr>
<td>&#8226</td>
<td>&#8226</td>
<td>&#8226</td>
</tr>
I have not yet played with the formatting as right now it is just theory, but can you tell me how to make the 3 content divs rotate so that each displays for 10 seconds then moves to the next eventually rotating back to the beginning.I know this will likely require php or jquery, but I am uneducated in both.
Thank you for any help that you can offer.

Making an Image a Hyperlink in Nivo Slider

I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.
There is one similar question on StackOverflow, but it is for a very old version of Nivo.
I am using this syntax for the slider.
<div class="slider-wrapper theme-default container">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<div class='slide'><a href='#'><img src='abc.png'></a>
</div>
<div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
</div>
</div>
</div>
Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(
If anyone knows how to make it work, then please let me know.
EDIT: Here is the only piece of CSS written by me:
.slider-wrapper {
margin: auto;
margin-top: 15px;
background: fade(white,80%);
padding-top: 15px;
margin-bottom: 40px;
}
.slide-title {
.font;
color: #ddd;
}
I am very late to party. it may be useful for someone
HTML
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img title="#htmlcaption1" src="images/01.png" alt="">
<img title="#htmlcaption2" src="images/02.png" alt="">
</div>
</div>
CSS
.nivoSlider a.nivo-imageLink {
background:white;
filter: alpha(opacity=0);
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;
}
If you remove the wrapper divs with class "slide" it will work just fine.
For example this is from nivo slider's demo
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
or checkout this thread,
NIVO SLIDER - Make a slide a link?

Categories