click button on url change (with scrolling) - javascript

I am a novice in web coding and I had a problem with the implementation of this simple code.
$(window).on('hashchange', function(e, direction){
if (direction === 'up') {
$(".prev").click();
}
else {
$(".next").click();
}
});
So, when user scrolling down and url is changing - click button .next (this part is work fine). When scrolling at top&url changing -> click .prev (It does not work).
And i have another one question. Will this code work fine without hashtag in URL? (mysite.com/?p=1 for example).
So html part is just:
<div id="p1" class="width:100%; height:500px;"></div>
<div id="p2" class="width:100%; height:500px;"></div>
<div class="next"></div>
<div class="prev"></div>
And there is another one js code, which change url when user scroll top/down of this div's.
Don't know how to detect scrolling from bottom to top...
Thanks for ur time!

Related

'Hovering' elements when clicked

What I want is fairly simple, and I have two examples for it:
http://janvanderkleijn.nl/
http://studio-laucke-siebein.com/
When looking at these portfolio websites you see it's scroll based websites mainly relying on images. The interactivity I'm looking for is the clicking on an image, resulting in a 'hovering' element over the web page, further elaborating the project with text, images etc.
What I like about it is that you don't have to leave the home-page to look into a project, and it can be closed by either pressing the close button in the top right, or clicked anywhere outside of this element. Especially in Laucke-Sibein's webpage it's nice, that when you scroll far enough down, the element dissappears.
How hard is it to achieve a similar result? How does this function work? I've been looking all afternoon and failed to find something that helped me further.
As mentioned by others there are many jQuery plugins like lightbox, fancybox, etc. that are capable of outputting images and text. Or a jquery-ui dialog box would work.
Alternatively you could create your portfolio items inside div's and show them on click events.
<body>
<div id="project-list">
html showing images from your projects. <br />
<img src="img1.jpg" data-project="project1" />
<img src="img2.jpg" data-project="project2" />
</div>
<div id="project1" class="project">
html displaying <br />
your project 1
</div>
<div id="project2" class="project">
html displaying <br />
your project 2
</div>
</body>
Then css something like:
.project { position: absolute; top: 100px; left: 100px; display: none; }
#project-list.fixed { position: static; }
Then the using jQuery it would look like:
$(function(){
// add click handler to the images
$('#project-list img').click(function(e){
// if a project is visible then just return and let the
// document click handler handle the closing of the project
if($('.project:visible').length > 0){
return;
}
// get the data project attribute which tells you which project to open
var project = $(this).data('project');
$('#' + project).slideDown('slow');
// add the fixed class to the project list so that it doesn't scroll
$('#project-list').addClass('fixed');
// you must have this to keep the click event from bubbling up
// through the DOM and triggering the document click function
// which would close the project as soon as it opens.
e.stopPropagation();
});
$(document).click(function(){
// this closes the project when anything is clicked that doesn't
// have the event.stopPropagation function set.
$('.project').slideUp('slow');
$('#project-list').removeClass('fixed');
});
$('.project').click(function(e){
// you want this so if they click anything in the project it doesn't
// close the project.
e.stopPropagation();
});
});
See a fiddle here http://jsfiddle.net/wdv79yxw/1/
Sounds like you're looking for a modal window. There are tons of jQuery libraries out there, or even pure CSS solutions. A decent one that I've used is jQuery fancybox, which supports videos, iframes, content, a gallery of images. It's very robust.

why jQuery show() is not working?

I am using jQuery to hide a div via hide().
Then when a link is clicked it will show the div, but for some reason it will not stay.
it will show for a ms then disappear.
HTML
<div id="introContent">
<h1 id="introText">Welcome</h1>
<p id="introParagraph">I create <strong>Responsive</strong>, <strong>Interactive</strong>, <strong>Beautiful</strong> Mobile ready Websites.
Every Website is created from scratch for each client so no Two Projects are alike.
Please read more about my Company and our work.
"High Quality Work at Affordable Prices"
</p>
</div>
jQuery
$(function() {
$("#introContent").hide();
$("#intro").click(function () { //$(#intro) is a link in my nav bar
$("#introContent").show();
});
});
Stop the browser from doing the default action of the element you are clicking. Cancel the click
$(function() {
$("#introContent").hide();
$("#intro").click(function (evt) {
evt.preventDefault();
$("#introContent").show();
});
});

Scrolling effect on click on a image

I'm trying to make a scrolling effect to a menu. To be precise i want to click on a image and when i click it the menu to scroll down by 1 with a fade effect or what ever effect to the next link.
Ahhh...Like a windmill wheel if u understand what i mean.:)
And couldn't find any info.
Here is my code :
<div class=".img-fade"><img src="http://www.lahondafire.org/nest/Volunteer%20Manual/Signs%20and%20Forms/Arrow.gif" width="180" height="170"><BR>
When i click on the arrow the links below start scrolling down by 1 and contact to be top and about me to be to bottom...</div>
<div class="menu">
About me<BR>
Portofolio<Br>
Contact
</div>
http://jsfiddle.net/WCtQn/242/
So when i click on that arrow to move the links from top to bottom or bottom to top,dosen't matter.
Thank you.
You can try this method. It reorders the list elements when the arrow is clicked
$('.img-fade').click(function() {
var last = $('a')[0];
last.remove();
$('br')[0].remove();
$('.menu').append("<br> " + last['outerHTML']);
});
You should learn how to use javascript/jQuery and show us what you've tried so far and what you're having trouble with next time you post here
If you want something fancier you could look to do something similar to this example, though I'd add some .stop()s to remove some errors it has
I'm no jQuery pro but I've come up with something that is close to what you're looking for. I spiced it up with a fade effect. I also removed the <br> tags and set the links to display: block;. You could modify what I have to something similar to what #Zeaklous has posted to remove them along with the element and add them back in.
http://jsfiddle.net/WCtQn/248/
$('.img-fade').on('click', 'img', function(){
var firstItem = $('.menu a').first();
firstItem.fadeOut(2000, function() {
$(this).remove();
$('.menu').append(firstItem);
$('.menu a').last().fadeIn(2000);
});
});

nicescroll not scrolling when hidden div is shown

I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});

JQuery, ScrollTop scrolls to last div and not ID div

So im basically using a link, to scroll through a series of divs to select the correct one.
Ie click on happy, and scrolls to 'happy' div,
However, the scroll seems to not go to what its linked to, but scrolls to the third div in the list.
Heres the code:
<div id="portfoliowrapper">
<div class="title">My Portfolio</div>
<div class="row1"><a id="kazookilink" href="#">Kazooki</a></div>
<div class="row1"><a id="uodlink" href="#">Universe of Downhill</a></div>
<div class="row1"><a id="kudialink" href="#">Kudia</a></div>
</div>
<div id="description">
<div id="top">description</div>
<div id="kazooki">kazooki</div>
<div id="uod">Universe of Downhill</div>
<div id="kudia">kudia</div>
</div>
<script type="text/jscript">
function goToByScroll(id){
id = id.replace("link", "");
$("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
};
$(".row1 > a").click(function(e) {
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
Need to use position() instead of offset() and also need to set the #description to be position:relative.
Then you need to factor in the current scrollTop.
Last you need to cancel the default click behavior.
Complete example at http://www.jsfiddle.net/gaby/TneA6/
It's probably just scrolling to the very bottom of the page -- it can't align the top of the div with the top of the page because the page ends. Try adding a bunch of empty space at the bottom of the page (a <div style='height: 1000px;"></div> or something) and see if it still results in the unexpected behavior.
I guess you need to prevent the usual behaviour of the click:
$(".row1 > a").click(function(e) {
// prevent default behaviour
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
Just guessing though.

Categories