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!
Related
I am building a responsive web site and would like to use this effect for desktop versions only (where the screen is big enough).
The code looks like this:
<div class="block_holder">
<div class="hover_block block_4">
<img src="images/thumbnail.png" />
<div class="top_half">Top Div that slides down on hover</div>
<div class="bottom_half">Bottom Div that slides up on hover</div>
<div class="hover_info">Caption text content</div>
</div>
</div>
Transitions take place in these classes: .block_4 .top_half .block_4 .bottom_half and all content in .hover_info to produce the hover effect.
For mobile, I would just like the photo to just be clickable, without any transitions since there is no hover. Is there a way to replace the entire block of code with something like this:
<p>
<a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
Patterns made in Adobe Illustrator
</p>
I've tried setting .top_half .bottom_half and .hover_info to "display: none;" in the #media section designated for mobile and tablet and then making the img a link, but the image is not clickable using the first code provided. Why is this?
I apologize if there is an obvious solution for this, I have not found or thought of any.
You might be better off using modernizer for this.
if ( Modernizr.touch ) {
$('.top_half,.bottom_half,.hover_info').hide();
$('.hover_block img').click(function() {
alert('I was clicked');
}).css('cursor','pointer');
}
Here is a fiddle to demonstrate the functionality. http://jsfiddle.net/LHLHG/
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
I have my web pages using HTML5 , JavaScript, Jquery, and CSS3!
It's just the way i need it to be when the window is full screen.
Just as I resize the window, the alignment goes haywire!
I need a simple fix!Please help! Thanks in advance!
Here is a small part of my code:
<img id="myimage1" onclick="changeimage1()" src="images/build_i.png" />
<img id="myimage2" onclick="changeimage2()" src="images/apply_i.png" />
<img id="myimage3" onclick="changeimage3()" src="images/learn_i.png" />
If i resize this window to the minimum the alignment changes.It starts to come one below the other.How do i get rid of that?
Give min-width and min-height to body tag/parent element. (In CSS)
or
Try this: (In jQuery)
$(window).on('ready resize',function(){
// post your code here related to layouts
});
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
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/