i am trying to create a menu bar using jquery. I am using the following code,
<div class="menu">
<table align="center">
<tr>
<td class="menu_item" style="background:green;" >
<a style="color: white;" href="index.php?view=Index">Home</a>
</td>
<td class="menu_item" style="background:blue;" >
<a style="color: white;" href="index.php?view=Services"> Service </a>
</td>
<td class="menu_item" style="background:red;" >
<a style="color: white;" href="index.php?view=About"> About </a>
</td>
<td class="menu_item" style="background:yellow;" >
<a style="color: white;" href="index.php?view=Download"> Download</a>
</td>
<td class="menu_item" style="background:pink;" >
<a style="color: white;" href="index.php?view=Contact"> Contact</a>
</td>
</tr>
</table>
</div>
<hr>
<script>
$(document).ready(function(){
//When mouse rolls over
$(".menu_item").mouseover(function(){
$(this).slideUp(1000, method, callback});
//When mouse is removed
$(".menu_item").mouseout(function(){
$(this).slideUp(1000, method, callback});
});
</script>
The mouseover and mouse out functions are working, i checked those using alert boxes but no change is happening to the items...? where am i going wrong ?
Well, you have a few syntax errors:
$(document).ready(function(){
//When mouse rolls over
$(".menu_item").mouseover(function(){
$(this).slideUp(1000);
});
//When mouse is removed
$(".menu_item").mouseout(function(){
$(this).slideUp(1000);
});
});
I'm not sure, however, what you're trying to achieve here. I.e., the above works but I'm not sure it really does what you intend.
You are going wrong with using tables for a list.
Use a list containing list-items.
<ul>
<li class="menu_item"></li>
<li class="menu_item"></li>
<li class="menu_item"></li>
...
</ul>
and float the list items left
ul li.menu_item {
display: block;
float: left;
}
Your animation should work now, also you could use the jquery hover function
$(".menu_item").hover(over, out);
to make it a little easier
You can find the complete code in this page:
http://jsfiddle.net/mdfj8/1/
The problem was the method and callback arguments.
Regards.
Related
I've tried every combination/individual selector and cannot figure this one out.
I have a 'wrapper' page that has two primary divs with id's:
toc-container
topic-container
The topic-container div has an html page loaded into it (that I cannot modify the source of), via the jquery .load function.
There are tags in those loaded pages that have href elements that I need to loop through and change. Here is the html of the loaded page:
<div id="help-content">
<table class="relatedtopics aboveheading" cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td width= "16">
<p class="bodytext"><img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
<td width= "16">
<p class="bodytext"><img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic" height="16" width="17" vspace="0" hspace="0" align="bottom" border="0"></p></td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist"><li class="numberlist">On the Logon window, click the <span class="procedureinterfaceelement">Change Password</span> link.</li><li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.</li><li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.</li><li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li></ol></div>
I have this function that is called after the page is loaded:
$('#help-content').find('a').each(function() {
var initHref = $(this).attr('href');
console.log(initHref);
var prefix = '?topicID=';
var newHref = prefix+initHref;
$(this).attr('href', newHref);
});
How can I change all href values in the page using jquery? I've tried targeting every selector possible : (
You can use the following vanilla JavaScript statement to get all anchor tags on the page
document.querySelectorAll('a')
Hope this helps you to get an initial idea on how to extend it for your solution. Happy coding.
1. Your code works, but you were only logging the original
href values. If you log again at the end of your code, you'd see the changes.
A more simple selector would be just $('#help-content a') and then you wouldn't need the .find() method call.
The JQuery .each() method is automatically passed arguments
that make referencing the element being enumerated a bit more simple,
so use that.
_target=self is only necessary if you are using the no
longer supported frameset element in your code. By default, links
open in the current window.
The vspace and hspace HTML attributes are deprecated.
All the other styling of your images (and your td elements, and really everything else) should really be done
with CSS. And, because all your styling is identical for each of
the images, a single CSS rule can set them all up.
Although your code does work, your prefix and newHref variables
aren't really necessary since you only use them once.
// When the DOM is ready...
$(function(){
$('#help-content a').each(function(idx, el) {
var initHref = $(el).attr('href');
$(el).attr('href', '?topicID=' + initHref);
console.log("Original href: " + initHref, " - New href: " + $(el).attr('href'));
});
});
/* Don't use HTML to style your page. That's what CSS is for.
And, using CSS will remove the need for redundant HTML. */
#help-content img {
height:16px;
width:17px;
text-align:bottom;
border:none;
}
#help-content table.relatedtopics { border-collapse:collapse; border:none; border-spacing:0; }
#help-content table.relatedtopics tr { vertical-align:top; }
#help-content table.relatedtopics td { padding:0; width:16px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help-content">
<table class="relatedtopics aboveheading">
<tr>
<td>
<p class="bodytext">
<a href="overview.htm">
<img id="f126" src="126.gif" class="zzzembeddediconfiletemplate" alt="Home">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="accessing_solutions.htm">
<img id="f125" src="125.gif" class="zzzembeddediconfiletemplate" alt="Previous Topic">
</a>
</p>
</td>
<td>
<p class="bodytext">
<a href="best_practice_browser.htm">
<img id="f124" src="124.gif" class="zzzembeddediconfiletemplate" alt="Next Topic">
</a>
</p>
</td>
</tr>
</table>
<p class="bodytext">Contact your system administrator for instructions to change your password.</p>
<p class="bodytext">Your administrator controls requirements for passwords, including the minimum character length, case requirements, and length of time until expiration. Contact your administrator for more information.</p>
<p class="bodytext">Complete the following steps to change your password:</p>
<ol class="numberlist">
<li class="numberlist">On the Logon window, click the
<span class="procedureinterfaceelement">Change Password</span> link.
</li>
<li class="numberlist">Enter your <span class="procedureinterfaceelement">User Name</span> and current <span class="procedureinterfaceelement">Password</span>.
</li>
<li class="numberlist">Enter your new password in the <span class="procedureinterfaceelement">New Password</span> and <span class="procedureinterfaceelement">Confirm Password</span> fields.
</li>
<li class="numberlist">Click <span class="procedureinterfaceelement">Login</span>.</li>
</ol>
</div>
I am quite new to jquery, so please excuse me if I'm doing something stupid:
I have a table where each td belongs to the same class "original" and each one has a unique id.
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
...
...
</table>
I also have a div where all elements are part of a separate class "onclick" and each element has another unique id that is connected to each td from the table.
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
...
...
</div>
When I click on each individual td, I want to display its corresponding div, so if I click on "1" then "1click" shows up. I currently have this jquery code that successfully does this, but only for the first pair of elements, so it doesn't work for anything beyond id="1" and id="1click".
$(function () {
$(".original").click(function() {
var divname = this.id;
if ($(".onclick").attr("id") == divname + 'click'){
var clickname= "#" + divname + "click";
if ($(".hide").css("display") == 'none'){
$(clickname).toggle();
}
}
}
}
How can I make it so that it searches each element of the table to find a match with each element of the div?
Thanks, and sorry if this is a stupid mistake.
I'm finding it difficult understanding what you're trying to do and would love to help but I need to try and understand it better.
1) You can search using .each() which will scan all the elements and you can use a conditional statement to find the one which is needed: I.e.
$(document).ready(function(){
$("td").each(function() {
if ($(this).attr("id") == "2") {
var element = $("#"+$(this).attr("id")+"click");
// do stuff with element
}
})
});
I created a small example which I think helps your scenario on JSFiddle: https://jsfiddle.net/keuhfu36/
$(document).ready(function(){
$("#i2click").click(function() {
alert("hello");
});
$("td").each(function() {
if ($(this).attr("id") == "i2") {
$("#"+$(this).attr("id")+"click").click();
}
});
});
2) I recommend you change the div values from id='1' and id='2' like i did in the example to a value which starts with a letter i.e id="i1" and id="i2" which makes it a lot less of a pain to work with.
Your script should be like ,
$(".original").click(function() {
var divId = this.id,
targetDiv = $("#"+divId+"click");
$(".onclick:visible").hide();
targetDiv.show();
});
Try the following code:
$(function(){
$('.onclick').hide();
$(".original").click(function() {
var divname = this.id;
$('#'+divname+'click').toggle();
});
});
$(function () {
$(".original").click(function() {
// Targeted Div Name
var divname = "#"+ $(this).attr('id') + "click";
// Toggle the div, as Id would be unique in the page
$(divname).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original" id="1">
one
</td>
<td style="cursor: pointer" class="original" id="2">
two
</td>
</tr>
</table>
<div id="second">
<div class="onclick" id="1click">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick" id="2click">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
</div>
IMHO, you should ditch the IDs altogether and just use the classes along with their indexes to achieve the desired effect much simpler, like this:
$('#main').on('click', '.original', function() {
var index = $('.original').index($(this)); // find the index of the clicked td
$('.onclick').hide().eq(index).show(); // hide all the divs then show the one at the same index as the clicked td
})
.on('click', '.close', function() {
$('.onclick').hide(); // hide all the divs when "close" is clicked
});
.onclick {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main">
<tr>
<td style="cursor: pointer" class="original">
one
</td>
<td style="cursor: pointer" class="original">
two
</td>
</tr>
... ...
</table>
<div id="second">
<div class="onclick">
Extra info about 1
<span class="close" style="cursor: pointer">×</span>
</div>
<div class="onclick">
Extra info about 2
<span class="close" style="cursor: pointer">×</span>
</div>
... ...
</div>
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I am having divisons show and hide.Now what i want is that on clicking "show" a divison below it show the details and the text of the "show" divison changes to "hide" and on clicking "hide" the details get hidden and text changes to "show".How this can be done .Please help
Here is my html :
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<span id="hide" class="" style="display:none">
<a href="#" class="fill-div" style="width: 100px;">
Hide details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
EDIT :
<tr class="">
<td width="40%" valign="top">
(<%=browser%>)
<span class="show" style="text-decoration: underline">
Show details
</span>
<div class="info" style="display:none; margin-left:2em">
<i>
"<%=useragent%>"
</i>
</div>
</td>
<td valign="top">
India(<%=rs.getString("IP_ADD")%>)
</td>
<td valign="top">
3:16 pm (0 minutes ago)
</td>
</tr>
My JAVASCRIPT :
<script>
$(document).ready(function() {
$(document).ready(function() {
$('.show').click(function() {
$(this).next().toggle();
var visible = $(this).next().is(":visible");
if(visible){
$('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}
});
});
</script>
It does not display the details.Please help
You do not need to span for toggling content. using two span for achiving this will make code more complicated. Try this:
Html
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
Js:
$('#show').click(function() {
$('#info').toggle();
var visible = $('#info').is(":visible");
if(visible)
$('a',this).html('Hide details');
else
$('a',this).html('Show details');
});
Working Demo
update:
Demo for multiple
$("#show a").click(function(e) {
e.preventDefault();
$("#info, #hide").show();
$("#show").hide();
});
$("#hide a").click(function(e) {
e.preventDefault();
$("#info, #hide").hide();
$("#show").show();
});
Use this to show/hide the "Details" div:
http://api.jquery.com/toggle/
Also, you could use just one span to display the "Show/Hide" link, changing the text accordingly when you click to toggle.
A breeze with jQuery. Try my example on jsfiddle.
// Gets executed when document and markup is fully loaded
$(document).ready(function() {
// Bind a click event on the element with id 'toggle'
$('#toggle').click(function() {
// Change text accordingly
if ($('#text').html() == 'Show details') {
$('#text').html('Hide details');
} else {
$('#text').html('Show details');
}
// Show / Hide info bar
$('#info').toggle();
});
});
You can do something like this:
http://jsfiddle.net/Mp8p2/
You don't need nearly as much HTML:
<span class="toggle">Show Details</span>
<div id="info">
Details shown here
</div>
along with just display:none in the css and the following jQuery:
$(".toggle").click(function() {
$('#info').slideToggle();
if($(this).html() == "Show Details") {
$(this).empty().text("Hide Details");
}
else {
$(this).html("Show Details");
}
});
I'm currently creating a page at this link. I'm using this javascript in my header (below my CSS):
<script type="text/javascript" src="http://static.tumblr.com/txc9jrr/yNxmd3lq6/jquery.js">
</script>
<script type="text/javascript">
$('.toggle').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.next('.edit')).toggle();
});
$('.cancel').click(function(){
var $tr = $(this).closest('tr');
$tr.add($tr.prev('.view')).toggle();
});
</script>
and this HTML:
<table>
<tr class="view">
<td>
<a class="toggle" class="icon-button" href="#">Edit</a>
</td>
</tr>
<tr class="edit" style="display:none">
<td>
hi
<a class="cancel" href="#">Cancel</a>
</td>
</tr>
</table>
In theory, it should work... However when I implement it into my page, it ceases to function. Does anyone have a clue as to what my problem is?
change
<a class="toggle" class="icon-button" href="#">Edit</a>
// ^--------------^---------------------Cannot define two classes like this
to
<a class="toggle icon-button" href="#">Edit</a>
// ^--------------------------------Try like this
DEMO
I think you should try this
$('.toggle').click(function(){
if ($(".edit").css('display') == 'none') {
$(".edit").css('display', 'block');
}
}
i think this will help you