So I'm trying to have an effect that when you click on an image, two more images (stored in #sharebar) will slide out from the left. The issue is currently when the images slide out, they slide from the left under the button, and then shift up after the animation is complete. I would like everything to be on the same level the whole time, so that the images appear to slide out from behind.
Can anyone help me out? Here's what I have:
<script>
$(function() {
// run the currently selected effect
function slideOut() {
var options = {};
$("#sharebar").toggle("slide", options, 500, callback() );
};
function callback() {
};
// set effect from select menu value
$( "#download_link" ).click(function() {
slideOut();
return false;
});
$("#sharebar").hide();
});
</script>
</head>
<body>
<div style="margin:200px;min-height:10px;background:#e9e9e9;overflow:hidden;">
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:1;">
<img id="exercise_link" src="exercises.png" />
<img id="subtitles_link" src="subtitles.png" />
</span>
Thanks in advance! :)
EDIT: I think this may have to do with z-index, but I'm not quite sure
I would definitely say z-index is going to be the way to go. It looks like you have some z-index things set already; just fix your z-index so the images layer on top of each other like you want them to.
<img id="download_link" src="Download.png" style="z-index:2;"/>
<span id="sharebar" style="width:20px;z-index:0;">
<img id="exercise_link" src="exercises.png" style="z-index:1" />
<img id="subtitles_link" src="subtitles.png" style="z-index:1" />
Just as a side-note: You're better off sticking these style attributes in a CSS document, rather than putting them in your HTML markup.
Setting the "top" element to have style="position:fixed" fixed the problem!
EDIT: Haha not sure why there's a downvote, it ended up fixing the problem.... :P
Related
Hello guys I have a problem with the javascript (i m not a big fan of this language :)). So I would like on my website an automatic Scroll : i have four div,which one has the same height (depends on the size of your screen). I want when i scroll to the bottom (or the top) that the slider goes directly to the next div (or previous), like a magnet. So I tried the scrollTo but i don t know how it works because i have to listen the scroll... so here is my html:
<!--Samsung Galaxy-->
<div class="bloc" id="samsungtab">
<img src="images/samsung.png" alt="samsunggalaxytab" />
</div>
<!--ORA-->
<div class="bloc" id="ora">
<img src="images/ora.png" alt="logo" />
</div>
<!--Oculus Rift-->
<div class="bloc" id="oculus">
<img src="images/oculus.jpg" alt="logo" />
</div>
<!--Acer-->
<div class="bloc" id="acer">
<img src="images/acer.jpg" alt="logo" />
</div>
and the javascript for the automatic size of the different div:
$(document).ready( function(){
var hauteur = (document.documentElement.clientHeight);
var position = hauteur/4;
$(".bloc").css("height",hauteur);
$("#samsungtab").css("margin-top",position);
$("#ora").css("margin-top",position);
$("#oculus").css("margin-top",position);
$("#acer").css("margin-top",position);
});
Thank you very much in advance for your help!!!!
Tom
To me it seems like you are looking for something like this:
https://github.com/peachananr/onepage-scroll (demo here: http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
I would advise you to use this jQuery plugin (based on the JS code in your example you are using jQuery).
If you'd like to code it yourself, you should start by rewriting your CSS. Setting the height of the .block elements via JS should not be necessary, but it depends on how the rest of your HTML is built up. If you add the complete HTML file here I might be able to assist on this as well.
After that you should look into jQuery's .scroll() handler. Usage:
$(window).scroll(function(){
//code that runs on scroll here
})
Another useful jQuery function in this case is .offset(). You can get the coordinates (so as well the distance from the top) of any visible element like this:
$('.block').offset().top.
Lastly, you should look into jQuery's .scrollTop() function. You can use this function to get the current scroll position: $(document).scrollTop(), or to set the desired scroll position:
$(document).scrollTop(200)
Good luck, I hope it helps!
I am using a JQuery scroll plug in which scrolls images in a div, sort of like a marquee.
I am trying to achieve the same thing, however instead of img tags I would like to scroll div tags.
Scroller
At present this is the mark-up
<div id="contentscroller" style="clear:both;">
<div id='left' class="logo-carousel">
<div class="logo-test"></div>
<img src='/images/lve.png' />
<img src='/images/friendslife.png' />
<img src='/images/aviva.png' />
<img src='/images/bright-grey.png'/>
<img src='/images/sagicor.png'/>
<img src='/images/zurich.png'/>
<img src='/images/legal-general.png'/>
<img src='/images/groupama.png'/>
<img src='/images/fortress.png'/>
</div>
</div>
This is the JS
<script>
$(
function () {
$("#left").imageScroller({ loading: 'Wait please...' });
$("#right").imageScroller({ speed: '4000', direction: 'right' });
$("#top").imageScroller({ direction: 'top' });
$("#bottom").imageScroller({ speed: '3500', direction: 'bottom' });
}
)
</script>
I need to achieve the same thing, however simply using div elements with a background image. The result will be exactly the same however instead of images, I would use empty divs with the image as the background, to avoid HTTP requests and to speed up the site performance.
I have tried replacing the images with divs, however it doesn't work because the JS is specificly targeting img tags inside the contentscroller div.
Modifying the original library is not the best answer, but it's what I want to suggest because the library simply looks for images and NOT divs. Take a look at some of its source:
$.each($this.children( ":not(div)" ), function() ...
This is simple, the library isn't looking for divs... What's the work around going to be? Create your own library based on their ideas.
alright so i have some unique problems; first of all, my jquery is not working; i very well might have not put it in the html right so i am going to toss a good deal of code out to see;
basically i need the rollover class image to change to its hover state when the div class is rolled-over (i have a some css which changes the div class display to block) alright so here is the html
<div id="header">
<div class="home" id="home" ><p><img src="images/home-crown.png" class="rollover" width="100px" /></p></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="js/load-it-up.js"></script>
/so yeah... trying to swap that image stuff out here is jquery
$(document).ready(function(){
$("img.rollover").hover(
function()
{this.src = this.src.replace("images/home-crown.png","images/home-crown-hover.png");},
function()
{this.src = this.src.replace("images/home-crown-hover.png","images/home-crown.png");}
);
});
really frustrated with it because i have tried multiple solutions; any help at all would be appreciated; it is probably something stupid :P
right now i am just trying to get the image to rollover (at least)
i really want the rollover to activate when the div is rolled over (the #home div)
Try this.
$("img.rollover").hover(
function(){
$(this).attr("src","images/home-crown-hover.png");
},
function(){
$(this).attr("src","images/home-crown.png");
}
);
I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet.
Is this how it works unless I know more advanced way of doing it?
Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....
This is what I have...
<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");
for(i=0;i<div1Images.length;i++)
{
div1Images[i].onmouseover=function()
{
this.style.width="100px";
}
}
</script>
<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>
Thanks in advance.
You can do this with CSS:
<img class="mypic" src="cat.jpg" id="im1"/>
.myPic:hover {
width:100px;
}
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/