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/
Related
I am working on a wordpress page and i want to set a fixed image and 3 different texts at the the bottom of it.
What I want to do is that when the mouse hover on Text1 the top image changes, when the mouse hover Text2 the top images changes again.
Example: http://fr.muaythaitv.com/pages/helpcenter/advertise.php
I searched on internet but couldn't really find what I'm looking for, hope someone can help me!
You mean something like this ?
HTML markup.
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
jQuery :
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href'));
});
Css at your will ..
See Here again - it´s the second example is a live link, the third is anchor disabled link.
I'm sure this is a pretty common question around here but after lots of research I can't seem to find an answer to my question.
So just a little warning; I'm really new into javascript and jQuery etc.
To the question! I'm trying to apply two images (It's img's that looks like buttons :P) which you click on and it scrolls to the "next" paragraph or div.
So to get an overview of how it looks, here' a part of the HTML:
<div id="scrollbuttons">
<img id="prev" src="pics/prev.png"></img>
<img id="next" src="pics/next.png"></img>
</div>
Also:
<div id="work">
<p class="maintext">blabla</p>
</div>
<div id="gallery">
<p class="maintext">blabla</p>
</div>
<div id="project">
<p class="maintext">blabla</p>
</div>
<div id="finish">
<p class="maintext">blabla</p>
</div>
So what I'm trying to create is when you click on "next", the page should smoothly and automatically scroll to firstly, "work", then to "gallery" etc.
And when you press "prev", the page should again smoothly and automatically scroll back to the previous point.
I have the latest jQuery version and I'd like to not install plugins if it's not absolutely needed.
So I hope this is enough info to get some help, I'd really appreciate it since I'm really new to JS.
Thanks in advance
/Emil Nilsson
Here you go, this could probably be done a little more efficiently but it's dynamic and it works. Click the buttons to go forward and backward. FYI I added a mutual class called section to all of your content divs
JSFIDDLE
var Section = "start";
$("#next").click(function(){
if(Section == "start"){
var nextSection ="work";
}else{
var nextSection = $("#"+Section).next(".section").attr("id");
}
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
$("#prev").click(function(){
var nextSection = $("#"+Section).prev(".section").attr("id");
$("html, body").animate({scrollTop: $("#"+nextSection).offset().top});
Section = nextSection;
});
maybe you need something like this
http://jsfiddle.net/urUFK/
the img would be inside of the anchor like this (semantics and W3C validation):
<img id="prev" src="pics/prev.png"></img>
on my version you just need to define the first element and the div id's
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 trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
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