Jquery keep users on the page - javascript

Today i asked a question to which has been resolved but i am facing a very little browser problem that when when users open my link with the hash tag it divert them to the active div but i want to keep them on the top of the page
so the problem is when someone vist my website from this example link
mywebsite.com/mypage.html#page1
i dont want users to scroll down to the actived div but want to keep them on the top of the page
Here is my code
CSS:
.active {
color:red;
}
#menu_container div {
display:none;
}
HTML:
<div id="nav_tabbed">
<a href="#show_page1" class='active'>Page 1</a> <!--This lets you add hash in the addressbar-->
Page 2
</div>
<div id="menu_container">
<div id="show_page1" style='display:block;'>Page 1</div>
<div id="show_page2">Page 2</div>
</div>
JS:
$(function () {
var hash = location.hash;//hash added in the browser.
if(hash.length){
$('#nav_tabbed a').removeClass('active');
$('#menu_container div').hide();
$('#nav_tabbed a[href*="' + hash + '"]').addClass('active');
$('#menu_container div[id*="' + hash.slice(1) + '"]').show();
}
// below works for click of the anchors
$('#nav_tabbed a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings('a').removeClass('active');
$('#menu_container div').hide();
$('#menu_container div[id*="'+this.getAttribute('href').slice(1)+'"]').show();
});
});
Here is the reference link of my question: jquery tabs access from urls

Maybe
$(function(){
document.location.hash = ""
})
can work: after you have loaded your page, a internal link dont force reload..

One way of doing that could be adding a mock id and then changing to the true ID on document ready:
$("page1-mock").attr("id","page1");
Or you may do as suggested in other answers, so far all seem legit too.

When you visit mywebsite.com/mypage.html#page1 and there is an element with the id of page1 in the document you can't prevent the browser to scroll down to it. The easiest solution is to remove the element with the id. The ugly solution is to scroll to the top of the page with after load of the page
setTimeout(function() {
window.scrollTo(0, 0);
}, 0);

Related

trying to make a link look different when page is clicked in html

well i have seen some similar questions but i couldn't find the solution i needed i am trying to make it so that when the user moves from one page to another in the website when the page is loaded the a tag should change color and stay that way i have tried using this code but it didnt work at all here is the html of the code
<div id="button-group" style="width:100%">
<img src="felix.png" id="cat" >
home
Hobbies
Contact
Services
</div>
so for example if i am on the Hobbies page and click the home page the home page should turn the color to blue or if i am on hobbies and its clicked it should also change color onload
here is the jquery that i tried
$(document).ready(function(){
$("#hobbies").trigger('.click');
});
and here is the css when triggered
.a :click {
background-color:rgba(0, 183, 255, 0.788);
}
You can use sessionStorage to store the link that was clicked and get it when the new page is loaded to set a class to the last clicked navigation element.
$(document).ready(function() {
let clicked = $.trim(sessionStorage.getItem("clicked"));
if (clicked) {
$("#button-group a").each(function() {
if ($.trim($(this).attr("href")) == clicked) {
$(this).addClass("clicked");
};
});
}
$("#button-group a").on("click", function() {
$("#button-group a").each(function() {
$(this).removeClass("clicked");
});
let link = $(this).attr("href");
$(this).addClass("clicked");
sessionStorage.setItem("clicked", link);
});
});
As a stack snippet for this doesn't work on Stackoverflow, here's a Fiddle with the adjustment to use preventDefault() on click of a link. Just run the Fiddle again after clicking on a link to see that the last clicked link gets added the class clicked.

Javascript accordion menu open when page loads

I am extremely new to coding, especially Javascript. I recently found a tutorial that I got to work for an accordion menu, but I am unable to understand how to get the drop downs closed when the page loads. Currently, all of the drop downs are open when the page loads. I tried looking at other solutions but I just don't understand the code fully yet. Thank you so much!
(function($){
$(document).ready(function(){
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
});
})(jQuery);
Replace
$('#cssmenu li.active').addClass('open').children('ul').show();
on line 4 with
$('#cssmenu li.active').removeClass('open').children('ul').hide();
You triggered expand action only on click. Just must set the first state on DOM elements.
<div style="display: none;"></div>
Or by default controled "closed" class name instead of "open"

Javascript fadeIn div tags fails on click

Im kind of new to javascript, and I have tried for several hours now to make this fadeIn function to work.
First of all, look at my code here.
I have also included the following in my header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
This is how I want the page to work,
When a user enters the site, the home selection will fadein
The menu is based on <ul> and <li> itmes for categories and in each category we have different comapnies. Each category have a <a href="category-id"> and each company have a <a href='company-id'> to the div tag made later in the body.
A user should be able to switch between the menu options, and each time the time should fade in.
So the problem as you see in my code, it works on page load, but I cant choose anything from the menu.
Any suggestions would be helpful
If I understood correctly you wanted it to function something like this :
$('#menu a').click(function () {
$("#content div").hide(); //Hide all content
var id = $(this).attr('href');
$(id).fadeIn(); // Show content for current tab
});
You didn't need this line (it is deleting the id) :
$("#menu li").attr("href", ""); //Reset id's
This is line I don't even know what it's for:
$(this).parent().attr("href", "current"); // Activate this google parent!
If you want to add a class to the current active menu item, use something like
$(this).parent().addClass('active');
Also you don't need to add '#' because you already had that in you href atrribute:
$($(this).attr('href')).fadeIn(); // Show content for current tab
You can check what kind of id you're getting by alerting it or logging it :
var id = $(this).attr('href');
alert(id);
$(id).fadeIn();
Are you sure with this line of Code?
$("#menu li").attr("href", "");
You do not override your ID here. You remove your link href.
you are resetting the "href" attribute. Thus, when you try to make a fadeIn the "href" attribute value is changed to "current".
Those two lines:
$("#menu li").attr("href", ""); //Reset id's
....
$('#' + $(this).attr('href')).fadeIn();
are wrong because $(this).attr('href') is equal to "" (empty string)
also you made a mistake because you did
$("#content div:last").fadeIn(); // Show first tab content
but the command and what you expect are not coherent. Here you are using fadeIn on the last tab content instead of the first.
You can try something like this: http://jsfiddle.net/546Jn/4/
$(document).ready(function () {
$("#content div").hide();
$("#content div:first").fadeIn(); // Show first tab content
$('#menu a').click(function () {
$("div#content div").hide(); // Hide all pages
$('div' + page).fadeIn(); // Show content for current tab
});
});

JQuery detect if an element with particular id is visible after page scrolling

I want to create the navigation as it is shown on page http://kiskolabs.com/
I've already created sticky menu however the problem begins with marking active element in menu.
The question is:
How can I detect if page is scrolled to particular id?
Let's say I have some headers like.
<h1 id="whatisit">What is it</h1>
<h1 id="desc">Description</h1>
<h1 id="faq">FAQ</h1>
and menu
<nav>
What is it
Description
FAQ
</nav>
I want highlight menu (add class or whatever) when page scrolls to this element.
I've found already how to scroll element to particular ID in this thread but I don't know how to detect on what id the is now. The size of page is dynamic and may change during content. So absolute solution what I thought of is bad.
What I got so far for scrolling:
$("nav a").click(function (){
$("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000);
});
I've also found this solution but maybe is there better way to achieve it?
Edit
This question is not duplicate of the question suggested by moderator. Moreover, that question does not have the accepted answer. My problem is a bit more advanced.
You could use animate callback function:
$("nav a").click(function () {
$("html, body").animate({
scrollTop: $(this.href).offset().top
}, 1000, function () {
$(this).addclass('scrolled').siblings('h1').removeClass('scrolled');
});
});
During a lot of trying and finding solutions in Internet I've solved my problem.
I've used waypoints plugin which appeared very easy to use. The plugin can be downloaded here.
The html code of menu:
<nav>
....
....
<a href="#whydata" class="scrollable" >....</a>
...
</nav>
and html code of headers where page is to be scrolled:
<h2 class="scrollable" id="whatisit">...</h2>
<h2 class="scrollable" id="spec">...</h2>
Jquery code to make page scroll on particular element with #id the same as a href attribute.
$("nav a.scrollable").click(function (){
var elementClickedHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(elementClickedHref).offset().top-100
}, 2000);
return false;
});
To change color of element which is currently active after scrolling I've used waypoint plugin. The code below finds h2 which is scrollable and get it's id. Then finds which links that are scrollable too has href same as id of a element and adds active class to this id and remove active class from inactive elements.
$('h2.scrollable').waypoint(function() {
var idToCheck = '#' + $(this).attr('id');
$('a.scrollable').removeClass('active');
$('a.scrollable[href="'+idToCheck+'"]').addClass('active');
}, {
offset: '100%'
});
It works perfectly as I wanted. I hope this solution will help someone who will face such problem.

How do I use colorbox to show hidden divs on my page without hardcoding?

I'm using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following:
$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"});
This will show the div with the ID of 344.
However, because I'm trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.
I modified Jack Moore's example:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return 'Open In New Window';
}});
so that it looks like this:
$(".colorbox").colorbox({width:"600px", inline:true, href:function(){
var elementID = $(this).attr('id');
return elementID;
}});
The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.
I also tried using the syntax in Jack's example (with no luck) so that my return statement looked like this:
return "#'+elementID+'";
I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?
Thanks for your help,
Jiert
I didn't really like any of the answers given above. This is how I did it (similar but not quite the same).
I also fully commented it for people a bit new to Javascript and the colorbox plug in.
$(document).ready(function() { //waits until the DOM has finished loading
if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page
$('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page...
var url = $(this).attr("href"); // sets the link url as the target div of the lightbox
$(url).hide(); //hides the lightbox content div
$(this).colorbox({
inline:true, // so it knows that it's looking for an internal href
href:url, // tells it which content to show
width:"70%",
onOpen:function(){ //triggers a callback when the lightbox opens
$(url).show(); //when the lightbox opens, show the content div
},
onCleanup:function(){
$(url).hide(); //hides the content div when the lightbox closes
}
}).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked
//you could also use "return false" for the same effect but I proffered that way
})
}
});
And this is the html:
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
I think it would work with multiple lightboxes on the one page but I haven't tested it with that.
I'm facing the same issue. What does your html look like? meaning, how did you structure your "divs"
Mine looks like this:
Javascript:
<script>
$(document).ready(function () {
$("a.colorbox").colorbox({ width: "50%", inline: true, href: function () {
var elementID = $(this).attr('id');
return "#" + elementID;
}
});
});
</script>
And the html looks like (I tried changing the display:none):
<a class='colorbox' href="#">Inline HTML</a>
<div style="display:none">
<div id="pop">
This data is to be displayed in colorbox
</div>
</div>
return "#" + elementID;
will have the desired effect as David says.
This is the way I got it to work
HTML: (taken from the example in one of the answers)
<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a>
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page -->
<p>Lightbox content goes here</p>
</div>
Javascript:
$('a.lightboxTrigger').click(function(){
var ref = $(this).attr("href");
$.colorbox({ html: $(ref).html() });
$.colorbox.resize();
});

Categories