$('.viewBookBtn').click(function() {
$(this).parent().parent().find('.hideable').toggle( // just the toggle function works fine
function(){
$(this).css('visibility', 'visible'); // but when defined it doesn't target the hideable classed element
}, function(){
$(this).css('visibility', 'hidden');
});});
I have 3 types of columns and they are identified by their class (in the TD and TH)... they are1. Always - cells that always appear - includes a primary key2. Main - cells that are necessary to be shown, but can be toggled3. Advanced - cells that are superfluous but helpful for the viewer.I want the user to be able to toggle Main and Advanced as visible/invisible. I tried the below code, which works, but, but since there's so much data it will lock up the browser and even invokes this ff error: "A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. Script: jquery-1.3.2.min.js:19"My questions are basically, can this be done without freezing up the browser? (e.g. can I group columns together and hide each column, since I believe it's the sheer amount of cells that I am hiding?)Here is my code:here's my javascript (on top of jquery's inclusion)
Code:
<script type="text/javascript">
$(document).ready(function() {
[code]....
I have about five <a> tags, I wanna set specific style for the clicked (selected) hyperlink a tag and the others unselected should have another style
so I have this style classes:
.AccordionContainer .menu_header {
cursor:pointer;
display:block;
background: #3f3c38;
[Code].....
I've successfully set up a table with toggling rows and alternate colour, and everything is working decently. Now, I've tried to do a further step by trying to style the parent row who do have child differently from those who don't, so that the user immediatly knows where clicking will bring result and where not. How can I do it? I've tried with the : parent selector but nothing, still keep looking all the same.
Here's my starting code:
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('.parent')
.css("cursor","pointer")
.attr("title","Click to see")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide();
});
</script>
<script type="text/javascript" src="../catalogo/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{ $(".parent:even").css("background-color", "#FFFFFF");
$(".parent:odd").css("background-color", "#F2F1ED");
$(".child:even").css("background-color", "#FFFFFF");
$(".child:odd").css("background-color", "#FAFAFA");
$("a").click(function(event){
$('.parent').unbind('click');
});
});
</script>
One more detail: I've got a dynamically generated table (from MySQL db) with more than 1000 rows.
I am trying to toggle the style of 4 input buttons in a form. Option1 is set to display the active style on page load. Clicking a button makes it active (on) and the others inactive(off).
jQuery(document).ready(function() {
jQuery("#option1").removeClass("passive").addClass("active");
jQuery("#option1").click(function(){
jQuery("#option1").removeClass("passive").addClass("active");
jQuery("#option2, #option3, #option4").removeClass("active").addClass("passive");
});
jQuery("#option2").click(function(){
jQuery("#option2").removeClass("passive").addClass("active");
jQuery("#option1, #option3, #option4").removeClass("active").addClass("passive");
});
jQuery("#option3").click(function(){
jQuery("#option3").removeClass("passive").addClass("active");
jQuery("#option1, #option2, #option4").removeClass("active").addClass("passive");
});
jQuery("#option4").click(function(){
jQuery("#option4").removeClass("passive").addClass("active");
jQuery("#option1, #option2, #option3").removeClass("active").addClass("passive");
});
});
I made a website in which I -for the first time- included some jquery code. I am totally new at this. I managed to have a menu, whose elements can be clicked, which triggers the apparition of a different "bubbles" with text inside. So far so good. But I would like to make a bubble disappear when I click on another element than the one that triggered its apparition. Explanation :
My menu is for example like: menu element 1 | menu element 2 It should do this
>> click on menu element 1 = bubble1 (it works) >> click on menu element 1 = bubble 1 disappears (it works) OR >> click on menu element 2 = bubble 1 disappears, bubble2 appears (doesn't work! there I have 2 bubbles at the same time)
I have a page with various elements, some visible, some invisible, as they become visible depending on user input.I am looking to select the visible elements, then within that collection, get the last element in the flow and manipulate it.
View 2 Replies View RelatedI needed a sidebar menu that, when a user clicks the <h3>, a submenu expands. When the user then clicks on a different menu item, the previous submenu disappears meaning only one submenu can be visible at one time.
Now the code I have at the moment (from jQuery forums) works. It now needs a bit more refining so that it works the way I intend.
When you first load the page, all of the submenus are collapsed which is a real pain as each submenu has 20 - 30 selections.
Is there a way to have them all hidden initially?
Is there a way to get an open submenu to close by clicking on the H3 title again?
Since the site is local only, I posted up a sample on my JSfiddle account.
[url]
This one, which I also found on google, did what I wanted, but without the smooth slide animation. - [url]
When you then click on one of the H3's, it kicks into action and works great!
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...
I have a setup where clicking on one of several spots on the screen shows one of the two forms that are hidden by default. I was wondering if there's a way to scroll the screen so this element is visible. Otherwise I can open below the fold and people will not know that something happened. The elements that I click on are not hyperlinks, jut regular divs. I was wondering if there's some method I overlooked that lets me take the page to a specific element.
View 2 Replies View Relatedhow do you detect if an element is visible when you use slideDown() and slideUp() to show/hide it?I have a question with five radio buttons; if no radio buttons are checked error msg displays
if (!$("input[@name='diagnosisHowLongAgo']:checked").val()) {
// display error msg;
}
[code]....
I have a class hidden by default at the document ready state. I use the show() function when its parent has been clicked and I want to be able to apply a click function to this newly visible element - when I write it I am finding that it is overriding the initial hide(). How do I work around this? I should say that this element is just a bit of text that says "close x" and will be used to "close" its parent div down...
View 1 Replies View Relatedif I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg
<html>
<head>
<title>expandable text area</title>
<style type="text/css">
[Code]....
How can I tell if an element is visible or not when the elements parent is the one being set to visible or hidden? So what command would tell me if the hithere id was hidden?
HTML Code:
<div style:"display:none;">
<input id='hithere'></input>
</div>
In the below code, the ajax-loader disappears before the html returned by .load is actually visible in the browser. How can I correct it?
[Code]...
I have the following css rule that describes the style of an element with an id named as treeList:
#treeList{
color: #ffee00;
width: 100%
}
Now I need jQuery to add this rule to another element with, of course, different id such as #fgsf:
<div id="fgsf">
//some text
</div>
Could jQuery able to apply the style rule of #treeList the other id element fgsf?
i have a search icon at the top of my page, when i click this it toggles show/hide on the search form. now when the user loses focus of the search form (.blur), i want it to activate the hide part of the toggle.
when the search icon is clicked, it gives focus to the search form, so the moment the icon is clicked, the search form gains focus, then when someone clicks somewhere else on the page and the form loses focus, i want the search form to hide.
the problem is, if i just have the search form hide on .blur, then when you click the search icon and then click somewhere else and the search form loses focus, and then you click the icon to show the search form again, it will hide the search form(to the user, it looks like it didn't do anything, since the search form is already hidden). so after 2 clicks on the icon, then, it finally shows the search form again.
[Code]...
How can I pick an id element (here #bridge1,#bridge2) and toggle its child (here a p element) without actually using the id element as parent?
'this > p' apparently does not work.
$('#bridge1,#bridge2').click(function(){
$('this > p').toggle();
return false;
});
Code:
test.div.style.backgroundImage=test.div2.style.backgroundImage;
It works if I specify the actual background image within the function, so I know the image is there, and I know it's been properly assigned to div2, but div1's background image doesn't change.
I have an <input type="checkbox"> whose immediate parent is an <a> tag. The <a> is significantly larger than the <input>.
I want the checkbox to toggle on/offwhether the <a> is clicked or the checkbox itself. I also wantto store the value of the checkbox after it changes.
This sounds simple butI'm having trouble with the event bubbling (as in, I don't understand it).
Here is my current code.
HTML:
I am looking for a way to determine is an element style was determined (thru css) or calculated.
So far I can t find the RightWay(tm) for doing this. $().height() returns the calculated height which is the same as $().css("height"). I have solved the problem under IE and Opera using DOM.currentStyle.height. But not on other browsers (e.g. gecko). To make clear, I want to know if the height css rule in action is something like: 100%, auto, inherit, 3em, 5pt, 100px.
$().height() returns the browser calculated value to px, even if the current set is '100%'.
How can I select red-marked TR ? by one $("") and without loop of course
<table>
<tr>
<tr>
<tr>
[Code].....
I am attempting to change the style after the user has loaded the page(every x number of seconds) but the element just doesn't seem to berefreshing. I have done all of the checking, and it seems like it ischanging it but it isn't showing that on the page.
View 3 Replies View RelatedI am unsure what is going on with my website? I had flash on it, and I have removed the flash and installed javascript. Everything is installed correctly from what I can see, when I go to the view page button on Dreamweaver the images rotate. When I upload it to my server they stop rotating.I have download all of the files needed for this to work, and have added them all to my server. Here is a copy of the coding.
[Code]..
On my website I have a lot of entries which are similar to blog-entries. Every single entry has about 500 signs and if there are more than there is supposed to be a button "read further"(atm there is no button but later it will be). If the user click this button, the remaining text of the entry is supposed to slide down. My problem is now that I don't know how to slide down just one article. Every article looks like this:
<article class="dark">
<div class="text"><h2>Title</h2> .....
<div class="slide_text"> .....
</div></div>
</article>
But how to slide down only the "slide_text" which belongs to the clicked article. If I use:
$('article').click(function() {
$('.slide_text').slideToggle(200);
});
Every singe "slide_text" of all the entries appears. But this is not, what I want. Is there a way to toggle just the child-slide_text of one entry? Or do I have to give every entry an id to define which entry is supposed to toggle?
I'm trying to load an external SVG file and change the fill style of a path element. The following code doesn't seem to have any effect:
$(function() {
$('#map').svg({
loadURL: 'Map_of_USA_with_state_names.svg',
[code]....
Is there something I need to do so that changes to the style take effect?