JQuery :: Make A Image Appear On Active Link?
Feb 22, 2010
I started using jQuery yesterday so im a noob. I have a navigation bar, and i want it to display a background image on the active menu item. (Like the top most menu on this website, it has a little blue underline)
[Code]...
Line 2: It loops though all the <a> tags in an <UL> with id nav_prim. (The <a> tags are inside of <li>'s in the <ul>.
Line 3: I check to see if the <a> tag's href atribute is the same as the URL of the page, if it is
Line 4: i want that specific <a> tag's background-image to be images/nav_bg.gif.
I can't get it to work. In firefox i get the error " $("ul#nav_prim a")[i].css" is not a function.
Why is that? Can anyone please help me? As i've said im new to jQuery and Javascript in general aswell.
View 3 Replies
ADVERTISEMENT
Mar 17, 2011
I'm new to jQuery and have a problem with links inside an accordion.
The simplified code looks like this:
<div class="active-item">
<div class="available-items">
<h5>Headline</h5>
</div>
[Code]...
The problem is, that the links inside the table are not active. If i click them, the accordion is closing What do i have to do, to keep the links inside the open accordion as normal links, without closing the accordion?
View 2 Replies
View Related
Oct 31, 2011
How to make an image map link to another page AND open a specific accordion section?I guess I need a script that knows which area of the image map was clicked and not only navigate to page 2 but opens the section via slide toggle I need it too.Here is the the page with the image map (although image map version not upload yet so I have what will be uploaded below)[URL] ...and the page I need to navigate to based on the area of the image map clicked and also slidetoggling the div I need it [URL] Here is the image map:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img src="/Img/Illustrations/kicktalkv2.jpg"" alt="Kick Talk" usemap="#kicktalk_map" />
[code]....
View 2 Replies
View Related
Apr 2, 2010
I have made a javascript image viewer where there are thumbnails at the top and when you click on them the bigger image below the row of thumbnail image changes accordingMy question is, how do i make the larger image become a hyperlink to the corresponding page it represents. Alternatively, it would not be a problem if a caption could be displayed below which i could make into a hyperlink.Here is my script .js file
function img1click() {document.IMG.src="imagelibrary/dazzlebig.jpg";}
function img2click() {document.IMG.src="imagelibrary/gunshotbig.jpg"}
function img3click() {document.IMG.src="imagelibrary/searoombig.jpg"}
[code]....
View 7 Replies
View Related
May 4, 2003
I am working on a explorer like tree in a php script. I have the standard + - in a box pics. How to I have the + pic change to the - pic when clicked. Also, how do I get it to change back when another + pic is chosen?
View 16 Replies
View Related
Nov 15, 2010
I have this script where if users click on a link it will show that particular link in a slideUp, slideDown effect. For example There are two links and Two divs.Both Divs are hidden to start. If the user clicks link 1, Div 1 will appear. If the user clicks link2 Div 1 will close and Div 2 will appear. how do I add a active state when the user clicks on each particular link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
xmlns
="http://www.w3.org/1999/xhtml"
[code]....
View 1 Replies
View Related
Aug 16, 2011
I'm creating an accordion menu and need to make the link you click on go from saying "click here to view" to "close". The way I had to set up the accordion is making finding code that works very difficult. Here is my [code]...
View 4 Replies
View Related
Mar 9, 2009
I am working on the project that will be only one page and the menu will link to the same page. The problem is that i can't add active class to the menu the same we did in the normal linked pages. For example, in css we can see .about .menu ul li .active a { color:#black} . This means the menu will be in black when the user is in the about page. I can't do like this in one page scroll menu as there is only one menu. Are there any ways to let the menu change (add active class)when i scroll to some specific part of the page?
View 3 Replies
View Related
Feb 10, 2011
I want to use an image map for something unique. The image would have about 10 to 15 (religious) symbols. When the user clicks on a particular symbol it will search the site for a few strings relating to that symbol. For example: Symbol 1 would be a cross when clicked it search the site for "christ, crucifix, christianity". I am sure I can make the image map but how do I make the image map call a function instead of a link.
View 7 Replies
View Related
Jul 20, 2010
I'd like to be able to get Superfish to expand the entire menu and show the current active link in pathlevel 2. I'm using the nav-bar style and it seems that only pathlevel 1 is visible:
[URL]
View 1 Replies
View Related
Aug 11, 2011
I am trying to develop a jquery based keyboard navigation for my new project.....
My code:
But the problem i face is that when my active link goes to first element of unordered list and then i press up arrow key, then i lose track of my active link...
View 3 Replies
View Related
Sep 12, 2011
I have a link as such:
[Code]...
In a nutshell, I need to set add/remove a class called 'active' to/from a link that is clicked within a DIV. So if the link has the class 'active' already assigned I need to remove it and vice versa however the issue I am having is that I have to double click the link in order for it to work!!
View 6 Replies
View Related
Oct 19, 2009
I use jcarousel in one of my project. As we know active image in jCarousel, default set in the left or right. Can i customized so active image will centered? Let say there's 5 image and i want image number 3 in the middle is set as active image.
View 4 Replies
View Related
Aug 19, 2011
I'm only adding this code to a few pages. I have the background changing over each linked hover, but is there anyway for me to allow one item remain that background color to indicate which page my visitors are currently on. If you can show me how to do one, I can figure out the rest. Code below.
[Code]..
View 2 Replies
View Related
Dec 3, 2010
I have some problems with assigning a class to my included navagation menu. I would like to give the last clicked menu item a active class so I can style it but i have no clue how that works with javascript. as you can see i have three files two pages which included the same menu. Now I would like to set the first page to active because it would be the page the would start. but then when someone clicks the second page it should become inactive and set the active class to the secone link.
[Code]...
View 3 Replies
View Related
Feb 15, 2012
I have a sample page with three tabs (tabs.html). Tabs are displayed as follows:
<ul class="tabs">
<li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Tab 1</a></li>
<li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Tab 2</a></li>
<li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Tab 3</a></li>
</ul>
The JavaScript used to switch tabs is:
function tabSwitch(active, number, tab_prefix, content_prefix) {
for (var i = 1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+active).style.display = 'block';
document.getElementById(tab_prefix+active).className = 'selected';
}
Now, by default, when I link to tabs.html, the first tab is set to active. Is it possible to create a link from another site that links to tabs.html and forces the second or third tab to be active?
View 1 Replies
View Related
Jun 8, 2011
getting all the header text:jQuery("#accordion h3").text();how do you get the active index? and how do you use that index to get the active header?how do you get the header text for the active header?
View 1 Replies
View Related
Sep 18, 2002
I am trying to figure out how to make a certain text link load in the active link color. What I'm doing is using frames to display different colors of product. In the right frame is the list of colors, and when clicked on, the image in the left frame changes to show the same product in a different color.
What I need is to let users know which image is being shown when they first come to the page, so I would like that link to show in the active color when the page is first loaded and then change to a visited link when another link is clicked on.
View 1 Replies
View Related
Mar 19, 2011
I've been able to develop the content div swap for the following test site, [url], but can't figure out how to highlight the active name in the left-hand sub-navigation.
Here's the code...
HTML Code:
View 2 Replies
View Related
Jun 24, 2011
iPhone and more can automatically recognize phone numbers and make them an active link to click and initiate a call to that number. I can do this on many webpages, but not in myTinyTodo task list. Anyone know what might be preventing the phones from being able to recognize the number and make it active?
You can input a task on this page with a phone number and then view on your phone to see if it is active link or not.[URl]...
View 3 Replies
View Related
Mar 7, 2011
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
My HTML:
Code:
<ul class="tabs">
<li>Tab1</li>
<li>Tab2</li>
[Code]....
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2)
I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
Code:
page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work.
View 9 Replies
View Related
May 27, 2011
I've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;
[Code]...
View 1 Replies
View Related
May 26, 2011
I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?
In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;
Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}
And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>
View 1 Replies
View Related
Nov 24, 2011
Bit of a lengthy topic name, I know - I'm trying to make a sort of really lightweight online t-shirt designer - basically, it'll show a picture of a t-shirt in the background (you'll be able to change the color via selector), and then be able to upload an image, drag it around the t-shirt and resize it. I've found this: [URL]. But I have no clue (after looking at the JS, I'm still pretty new) how to set bounds to keep it in, or how to save/output the image it creates - that is, the uploaded image on top of the t-shirt needs to be saved as a single image and then output, probably via email. I am fairly fluent in PHP, but still pretty new to javascript. What is A, the best way to upload the user image (and give a max file-size) and B, the best way to drag/resize it around the t-shirt, but without moving it off the t-shirt image, and C, save that image then output it?
View 2 Replies
View Related
Dec 5, 2009
I have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class
Code:
<div id="menu">
<ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li>
<li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li>
<li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li>
</ul>
</div>
[Code]...
View 4 Replies
View Related
May 11, 2010
Using a UI dialog I'd like to load in 10 or so images. Each would be unique and after you click on one the following needs to happen:
1. Image appears on the parent page in a specified ID.
2. A "hidden" field is updated so that when the user submits the db is updated with their selection.
3. Dialog closes automatically.
That's it. Basically it would work similar to "datepicker".I'm using the latest 1.4 and ui and been making great progress as learning basics. I need to do the above and it seems like such a no brainier and or it should already exist but after 2 days of searching and trial and error...
View 6 Replies
View Related
