My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.
Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.
Here's what my code looks like :
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show();
}
else {
$(this).hide();
}
});
}</script>
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var slider = $('#slidersample').bxSlider({
mode:'fade',
controls: false
});
$('#bx-prev-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#hover-next-g-sample').click(function(){
slider.goToPreviousSlide();
return false;
});
$('#bx-next-sample').click(function(){
slider.goToNextSlide();
return false;
});
$('#hover-next-d-sample').click(function(){
slider.goToNextSlide();
return false;
});
});
});
</script>
</head>
<body>
<div id="left-menu">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br />
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br />
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a>
</div>
<div class="newboxes" id="newboxes1">DIV 1
<!-- SLIDER -->
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px">
<div class="bx-prev"><div id="bx-prev-sample">←</div></div>
<div class="bx-next"><div id="bx-next-sample">→</div></div>
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div>
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div>
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px">
<li><img src="images/1.jpg" width="580" height="375" /></li>
<li><img src="images/2.jpg" width="580" height="375" /></li>
<li><img src="images/3.jpg" width="580" height="375" /></li>
</ul>
</div>
<!-- SLIDER END-->
</div>
<div class="newboxes" id="newboxes2">DIV 2<br /></div>
<div class="newboxes" id="newboxes3">DIV 3</div>
</body>
</html>
I use
.newboxes {display:none;}
in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.
Can anyone think of a way to fix this? Thank you.
I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true
});
$("#processSignUp").click(function() { // button that sets the DIV visible
$("#trainings-slide").show(); // DIV that contain SLIDER
mySlider.reloadSlider(); // Reloads the slideshow (bxSlider API function)
});
});
</script>
As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.
I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.
I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.
You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden;
I`m use last solve
Another solution would be to allow bxslider to load, then hide it once it has.
<script>
var mySlider;
$(function() {
mySlider = $('#slider').bxSlider({
easing: 'easeInCubic',
displaySlideQty: 3,
moveSlideQty: 1,
infiniteLoop: false,
hideControlOnEnd: true,
onSliderLoad: function() {
$('#trainings-slide').hide();
}
});
});
</script>
Related
I am using fancybox. Here it fancybox will display on clicking somewhere but i need to display after page scroll. Now i am looking for fancybox. Anyone can suggest me any plugin like fancybox with scrolling not clicking.
Now i have tried with fancybox so here is code of fancybox. But you can help me with any plugin.
$(document).ready(function() {
$(".fancybox").fancybox();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>
Mousewheel event listener taken from this: Get mouse wheel events in jQuery?
I also created a jsFiddle: https://jsfiddle.net/jmL7zgzt/
$(document).ready(function() {
$(".fancybox").fancybox();
});
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll up
if (!$("html").hasClass("fancybox-enabled")) $('.fancybox').click()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet"/>
<a class="fancybox" id="single_1" href="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_b.jpg" title="Morning on Camaret (Tony N.)">
<img src="http://farm9.staticflickr.com/8140/30366640446_eb359921c5_m.jpg" alt="" />
</a>
One simple way to stay with your fancybox plugin would be to trigger a click on a image on scroll.
$(window).one('scroll', function(){
$('img').trigger("click")
})
I am working on a site.I need horizontal scrolling on a particular section,for that i am using JinvertScroll jquery.When i run that jquery's example the scrolling is working on entire page.how can i set the scrolling for particular section only??I mean how can i set that particular div that should scroll?Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/example.css" />
</head>
<body>
<section id="scrolll">
<div class="middle scroll" style="border:solid red;backgroun:red">
<img src="images/middle.png" alt="" />
</div>
<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
var scrolll= document.getElementById('scrolll');
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 600, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent-50);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
</script>
</section>
<section>
<div style="border:solid orange;height:1000px"></div>
</section>
</body>
</html>
<div id="scrollDiv" style="overflow:auto;">
// write code here over which scroll will be applied
</div>
The section you want to scroll place it inside a div . Give that div an Id e.g. scrollDiv and Place a style attribute on it as shown in the example above.
You don't need plugin for that. Just use height and overflow-y where you want a scroll
#scrolll{height: 600px;
overflow-y: scroll;}
<section id="scrolll">
<div class="middle scroll" style="border:solid red;backgroun:red">
<img src="images/middle.png" alt="" />
</div>
</section>
<section>
<div style="border:solid orange;height:1000px"></div>
</section>
I am using jpanelmenu everything works fine but is there a way so it wont push all the content to the right but instead over lay it
an explain would be like the Youtube's menu which is shown when you press the button next to the Youtube logo. The menu over lays everything.
Question: is there a way so it wont push all the content to the right but instead over lay it?
Got all the code from here
my jpanelmenu:
jsfiddle
code:
<script type="text/javascript" src="http://jpanelmenu.com/jquery.jpanelmenu.js"></script>
<input class="menu-trigger" type="button" value="M">
<div class="wrap">
<ul id="menu">
<li>Overview</li>
<li>Usage</li>
<li>Inner-Workings</li>
<li>Animation</li>
<li>Options</li>
<li>API</li>
<li>Tips & Examples</li>
<li>About</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
<style>
.wrap{
display:none;
}
</style>
<script type="text/javascript">
var jPM = $.jPanelMenu();
jPM.on();
</script>
Set .wrap{ position:fixed; }, see my example.
I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.
So this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script>
<style>
#div02{background:url(norahalf.png) no-repeat; background- size:contain;height:100px;width:100px;position:absolute;}
#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>
<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>
Any help would be greatly appreciated!
Nora
Try not having the animate function executed after hovering the paragraph, then:
$(document).ready(function(){
$("#div02").animate({left:'150px'});
$("#div01").animate({left:'180px'});
}
To start automatically you just need to trigger mouseover event on page load:
$(function() {
$("p").hover(function() {
$("#div02").animate({ left: '150px' });
$("#div01").animate({ left: '180px' });
})
.trigger('mouseover');
});
I'm not sure if you still need this p hover event at all though.
Demo: http://jsfiddle.net/rDMGC/
I am trying to build a masonry page with some images. here is my code
CSS
<style>
.masonryImage{float:left;}
</style>
JavaScript
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
<script src="<?=base_url('masonry/masonry.min.js')?>"></script>
<script src="<?=base_url('masonry/masonry.js')?>"></script>
<script type="text/javascript">
var container = $('#container');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
HTML
<body id="container" style="height:100%;width:100%;background-color:#309be9;">
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
</div>
</body>
I dint understand where the bug is, the page is not rendering in mansory style.
please suggest.
UPDATE:
After trying the two suggested javascripts the images started overlapping . Actually the code itself is not responsible for this. But something is going wrong with masonry. here is the screen shot
If you notice clearly i highlighted with a red mark, it shows some of the images and hiding!!
Ahh this is playing with me
If i try inspect element, the images are returning to their position
Too puzzeled
I don't see an initialization of Masonny in your code:
$(document).ready(function (){
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});
})
Check if your js is properly called.
Either use masonry.min.js or masonry.js it's good to use masonry.min.js if your are deploying.
To check if your js is called properly, view source and open the js link or place a simple alert inside your js.
EDIT: You seem to use imagesloaded which is not part of mansory, but can be used with mansory. If you want to initiate masonry, you have to replace your code with
$( document ).ready(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});
or with your current code you have to add imagesloaded.js