navigation with javascript - javascript

so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,
function navigation($nav,$container,$link)
{
$($nav).click(function(){
$($container).slideUp(500,function(e){
$(this).append("<span>");
$(this).load($link);
});
});
{
$($container).ajaxComplete(function(){
$(this).slideDown(500);
});
}
{
$($container).slideUp(500);
}
}
the usage is simple
navigation("#home",".content","home.php");
navigation("#about",".content","about.php");
navigation("#store",".content","right.php");
the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;
now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro's have any idea ???

I can help but it's going to be quite a rewrite.
Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:
<ul id="navigation">
<li class="nav">
<a src="home.php">HOME</a>
</li>
<li class="nav">
<a src="about.php">ABOUT</a>
</li>
<li class="nav">
<a src="right.php">RIGHT</a>
</li>
</ul>
Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.
$(function()
{
$('.nav').click(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
$('.content').slideUp(500).load($(this).children('a').attr('src'),
null,
function(){$(this).slideDown(500);}
);
return false;
});
});
Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).

There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:
$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});
Another would be to manipulate its CSS to hide the element (set display to none).
As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event
http://jsfiddle.net/D3AP2/

Related

Change CSS with JS / jQuery when hash value in URL changes

I have 6 100vw and 100vh divs on a page and a right aligned fixed nav bar.
Each of these divs has an id# from 1 - 6
The nav bar has 6 list items links which point to the id of the div,
for example:
<ul>
<li id="list-item-1"></li>
<li id="list-item-2"></li>
<li id="list-item-3"></li>
<li id="list-item-4"></li>
<li id="list-item-5"></li>
<li id="list-item-6"></li>
</ul>
I am using scroll spy to nicely 'scroll' to the targeted div.
This nicely places the id value in the ur.
for example:
mywebsite.com/#1
or
mywebsite.com/#2
etc
What I would like to do however is IF the url contains #1 or #2 or whatever number it may be, the list item background changes color.
I originally tried an active/not active class, however, this is done on the scroll and click so a listener for a click won't always work.
I have seen quite a few examples from previous questions on here, however the the closest I could get would be something like this:
function locationChange() {
if(location.hash == "#1") {
$('#list-item-1').css('background-color', '#333333');
$('#list-item-2').css('background-color', '#333333');
} else {
$('#list-item-1').css('background-color', '#ffffff');
$('#list-item-2').css('background-color', '#ffffff');
}
);
window.addEventListener("hashchange", locationChange(), false);
With the above code, the page sometimes loads with list item 1 changed, which is good, it picks up the #1 on page load, however when I click or scroll through the page, the others are not picked up.
(I have only supplied a small amount above, my actual code applies this to all list items.)
Any help / suggestions / example code would be greatly appreciated.
Without having a working example, I believe the issue is within this line:
window.addEventListener("hashchange", locationChange(), false);
Adding a listener is a right course of action, but you are calling your function when you are defining the listener. Changing locationChange() to locationChange will not immediately invoke the function and instead pass a handle to the function:
function locationChange() {
if(location.hash == "#1") {
$('#list-item-1').css('background-color', '#333333');
$('#list-item-2').css('background-color', '#333333');
} else {
$('#list-item-1').css('background-color', '#ffffff');
$('#list-item-2').css('background-color', '#ffffff');
}
);
window.addEventListener("hashchange", locationChange, false);

Moving the screen scroll position after page jumps to anchor point?

I have a menu on a single webpage whose links move the page to the section with the corresponding ID. However, there is a sticky header that is covering the top part of each section, so I want to scroll slightly to compensate.
I'm trying to determine a way to scroll the page by 50px after the page moves to a section. I tried doing a .click() event listener on each link, but it appears that the page is moved after the callback is issued, negating my attempt to scroll.
My code looks like the following:
HTML:
<ul id="menu">
<li id="menu-item-1">1</li>
<li id="menu-item-2">2</li>
<li id="menu-item-3">3</li>
<li id="menu-item-4">4</li>
</ul>
JS: (the two interior lines work in the console but not in the page code itself)
$('#menu-item-1 a').click(function(){
var y = $(window).scrollTop();
$(window).scrollTop(y-50);
});
Is there a way to listen for a link action to be completed, then run my scroll code?
did you try setting a timeout, it will have a flicker effect though (unnoticeable)
also you can change your click event to handle all the a tags within li item like this
$('li > a').click(function(){
setTimeout(function(){
var y = $(window).scrollTop();
$(window).scrollTop(y-50); }, 1);
});
here is a sample fiddle for you https://jsfiddle.net/fxabnk4o/16/
As you observed:
but it appears that the page is moved after the callback is issued, negating my attempt to scroll
This happens because your events attached to anchor tag will be executed before the anchor tags default behaviour.
You are using id so you can use it to scroll also via javascript.
Here is a sample which I have tried out:
http://plnkr.co/edit/FzHYaxMCeOMTvWurtNRe?p=preview
<ul id="menu">
<li id="menu-item-1">1</li>
<li id="menu-item-2">2</li>
<li id="menu-item-3">3</li>
<li id="menu-item-4">4</li>
</ul>
function handleClick(e, scrollElemId){
e.preventDefault();
window.scrollTo(0,document.getElementById(scrollElemId).offsetTop+50);
}

Highlight a specific div on click to attract attention

I'm making a site and i haven't been able to figure out how to highlight a certain div without everything blowing out of proportion. I want the top nav where it says home, sitemap, and contact to highlight a div in the footer. When you click contact i want it have you dragged down to the bottom where it is but i want it to highlight the contact div just to get your attention real quick so its easier to find. i tried some plugins but they didnt work to well.
Site
<div id="navContainer">
<div id="nav">
<ul>
<li>Home</li>
<li>Site Map</li>
<li>Contact</li>
</ul>
</div>
Using jQuery, add an id to the contact button like contact and one to the ul like contactUL then this works. Here is a jsFiddle
$("#contacter").click(function() {
$(window).scrollTop($(document).height());
$("#contact").css("background-color", "yellow");
});
Something like this perhaps:
http://jsfiddle.net/E6h5u/1
// on click of a nav element with class scroll
$('nav .scroll').click(function () {
// select the corresponding footer element
// (you may want to work with a class or data attribute, in stead of basing on the content)
var $footer = $('footer a:contains(' + $(this).text() + ')');
// scroll to it
$("body").animate({
scrollTop: $footer.offset().top
}, "slow", function () {
// when the scroll is ready, add a highlight class
$footer.addClass('highlight');
// wait some, and remove the class again
setTimeout(function() { $footer.removeClass('highlight'); }, 1000);
});
});
I put the explanation in the code comments, but feel free to ask.
Note that I used a class with a css transition for the highlighting, but you could also use some jQuery animation if you prefer (for legacy browser compatibility with the css transition perhaps...)
Gotta use javascript (and preferably JQuery, as the previous poster said). Here is a working Fiddle showing how you could could go about this.
http://jsfiddle.net/HerrLoop/eBxyM/1/
$('#nav ul li:nth-child(3) a').click(function(){
$('#footer .contact').addClass('highlight');
});

contextmenu is not opening on right clicking div

I am using contextmenu.js (jQuery context menu plugin) for opening the context menu on right clicking of div. But somehow only default menu is opening. I am not able to locate the exact problem.
On debugging, it is showing that on its right click it is attaching the context menu to div. But when I right click div, default menu opens.
I know I am providing very limited information but any suggestion and help will be appreciable.
I think you should do something like this, if that is your element that should get the menu
<div id="item-1">This should have a menu</div>
Then your javascript should look like this:
$(document).ready( function() {
$('#item-1').contextMenu({
menue: 'menueName'
},
function(action, el, pos) {
// do sth when the menu was clicked
alert('Action ' + action + ' was clicked on ' + $(el).attr('id'));
});
});
The menue itselfe should defined in a list like:
<ul id="#menueName" class="contextMenu">
<li class="action1">
<a href="#action1>Action 1</a>
</li>
<li class="action1">
<a href="#action2>Action 2</a>
</li>
</ul>
Also make sure you have jQuery 1.3 or above included in your page.
I had the same problem.
Replacing if(jQuery)( function() { at the beginning of jquery.contextMenu.js with (function($, undefined){ fixed the problem. I hope that helps.

Click event not processed when using prototype (with lowpro)

I have JS code that uses lowpro (prototype extension) to reorder a set of dynamically generated questions. So when I click a.move-up I want to move that element's parent up. And a.move-down suppose to move it down.
I'm using lowpro since the elements are generated after dom:loaded.
http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype
JS code:
document.observe('dom:loaded', function() {
Event.addBehavior( {
'a.move-up:click': function(event) {
alert('Moving up!')
//moveUp(this);
//event.stop();
},
'a.move-down:click': function(event) {
alert('Moving down!')
//moveDown(this);
//event.stop();
}
});
});
I have two links for each element (div.question) that allow that element to be moved up or down. However these click events don't get processed.
<div id="questions">
<div class="question">Q1 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
<div class="question">Q2 stuff
<a href="#" class="move-up" />Up</a>
<a href="#" class="move-down"/>Down</a>
</div>
</div>
As part of debugging I've cut down the code to bare minimum, just trying to make sure event handling works. I don't even see the alert pop-up when I click the JS-backed links. So the "click" event isn't being handled properly.
What am I doing wrong???
Thank you!
After doing some reading/research I realized that elements that are generated dynamically...
wait for it...
are not registered/bound after DOM loads, thus the addBehavior needs to be reload()-ed for it to pick up new elements.
So after dynamically generating new elements, there has to be a call to
Event.addBehavior.reload();
After that call, new dynamically-generated elements can be moved up/down just like I want.
I knew it had to be something as simple and obvious as that... sigh

Categories

Resources