JQuery Toggling Dynamically Named Objects - javascript

At the moment I have a tiered list of div boxes each holding a title. At the beginning of each title there is a - sign which when clicked hides or displays everything tiered under that div in javascript with a link.
My problem is I'd like to change it over to JQuery but don't really know where to start. I've got jquery running on the page as I've done $(document).ready(function(){alert("fubar");}); and it alerts correctly, but I don't know where to go from there.
The link on the - sign currently has an onclick function of ShowHideStuff(ChildrenOf[IDValue]) and then the div box it hides/displays is called ChildrenOf[IDValue].
Here is the javascript I'm currently using:
function ShowHideStuff(id){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}

Do you want do the same using jQuery?
Try this:
function ShowHideStuff(id){
$('#'+id).toggle();
}

Can I suggest first having a look at some of the jQuery docs, they're there for a reason.
http://docs.jquery.com/Main_Page
But for your problem, you need a selector for each '-' sign, which could look like this $('.minus') . Which selects any element with class='minus' (you would have to add the minus class to each '-' element.
The code would then be:
$('.minus').click(function(){
ShowHideStuff(ChildrenOf[IDValue]);
});

Related

Format text as user inputs in a contenteditable div

I'm attempting to make a page that allows users to input text and it will automatically format the input -- as in a screenplay format (similar to Amazon's StoryWriter).
So far I can check for text with ":contains('example text')" and add/remove classes to it. The problem is that all of the following p tags inherit that class.
My solution so far is to use .next() to remove the class I added, but that is limited since there might be need for a line break in the script (in dialogue for instance) and that will remove the dialogue class.
$('.content').on('input', function() {
$("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high");
$("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high");
});
I can't get || to work in the :contains parameter either, but that's the least of my issues.
I have a JS fiddle
I've worked on this for a while now, and if I could change only the node that contains the text (INT. or EXT. in this example) and leaves the rest alone that would work and I could apply it to the rest of the script.
Any help would be appreciated, I'm new to the stackoverflow so thank you.
See the comments in the code below for an explanation of what's going on.
Fiddle Example
JQuery
var main = function(){
var content = $('.content');
content.on('input', function() {
$("p.input").each(function() {
//Get the html content for the current p input.
var text = $(this).html();
//indexOf will return a positive value if "INT." or "EXT." exists in the html
if (text.indexOf('INT.') !== -1 || text.indexOf('EXT.') !== -1) {
$(this).addClass('high');
}
//You could include additional "if else" blocks to check and apply different conditions
else { //The required text does not exist, so remove the class for the current input
$(this).removeClass('high');
}
});
});
};//main close
$(document).ready(main);

Hide div having variable dynamic ID

The div is a switch which gets a dynamic ID .
class name is impbtn , id is generated in variable this.impbtn6.id
HTML:
<div id="widget-id63032Candy_Eaten_importGoodsBtn" class="impbtn"></div>
There are two places hide is required - click and onload
In click event
document.getElementById(this.impbtn6.id).style.visibility="hidden";
works fine .
I cannot use Document.getelementbyID , as multiple form loads occur and button is not supposed to be hidden then .
So i trued using JQ to access css properties
This
jQuery('.impbtn, #this.impbtn6.id').css('visibility',"hidden");
works but makes all button in the class invisible . I want to make only this.expbtn6.id invisible not all ids under this class .
I have read each and every page available.Some things Iv unsuccessfully tried (Separately)
var vid= this.impbtn6.id;
jQuery("#"+ vid).visibility("hidden");
$('#vid .impbtn').css('visibility',"hidden")
var row2=$(".impbtn").find("div#"+vid);
row2.hide();
$('#vid .impbtn').css('visibility',"hidden");
$('div#vid').css('visibility',"hidden");
$('.impbtn', $("#div" + this.impbtn6.id)).css('visibility',"hidden");
$("#div"+ vid).css('visibility',"hidden");
$("#"+ vid).hide();
$('#vid').css('visibility',"hidden");
row = $('#' + vid);
row.css('visibility',"hidden");
I would highly appreciate a reply/comment.
your question is a little confusing as you say
document.getElementById(this.exportbtn6.id).style.visibility="visible";
works fine but this code shows the div, not hides it, and why cannot the same code be used to hide if you use it to show?
then your other snippet that supposedly works:
jQuery('.expbtn, #this.exportbtn6.id').css('visibility',"visible");
cannot work because #this.exportbtn6.id will not resolve to the variable's content inside the double quotes, so i am pretty sure this line will not do anything.
The way to do this correctly is
jQuery('#' + this.exportbtn6.id + '.expbtn').hide();
but i cannot tell for sure as the question is not clear. If my understanding of your question is correct, the above line will do the trick. Keep in mind that the value of "this" will differ based on context, so it maybe that you are referencing the wrong "this".
Try this
$('#this.exportbtn6.id').css('visibility','visible');
With jQuery:
$("#"+this.expbtn6.id).hide();
I hope it helps.

Ajax CSS bugg. How do i prevent from double click in order for the css to apply?

i have a div that says "on",
And i created a ajax function that everytime a user click the div. It will change the "on" to "off" (A query based on the users column will echo out if the div id is on or off ) and if the user clicks again it will switch it back to "on" again. This is how my code looks like
$(".buttons2").click(function(){
var d = $(this).attr("id");
if(d == "off")
{
$(".buttons2").css("background-position" , "0 -30px");
$(".buttons2").attr("id", "on");
}
else if(d == "on")
{
$(".buttons2").css("background-position" , "0 -1px");
$(".buttons2").attr("id", "off");
}
});
});
My problem is that, in order for the function to work, i have to click the div 2 times. What's the problem?
But it's a switch button. It depends on what the user has in the column. If the user has for example online= 1, it should start to switch in the opposite way. Off>on , on>Off. The div is based on a query
First, you should not use the ID tag like that! Changing an ID shouldn't really happen (unless you have a very good reason). A reason your code might not work is because the first value of the ID might not be right, or because the ID is not made to be change. The code provided in the question should just work.
One way would be by classes and toggle those. Easier to understand like this (IMO):
.buttons2{
background-position: 0 -30px;
}
.toggled{
background-position: 0 -1px;
}
<div class="buttons2"> Some Content</div>
And then use jquery to toggle it:
$('.buttons2').on('click', function(){
$(this).toggleClass('toggled');
});
I changed the $('.buttons2') in your code to $(this). I'm assuming there is only one .button (which, kinda ironicly, would make id="button2), so we use the 'this' to select it (much like your var d).
It's suggested in the comment you use data-* values for the intent you want. While the data-* attributes are intented for this (eg: data-state="on"), I choose classes because of jQuery's .toggleClass() because I find this easier for toggling.

Show and Hide DIV based on users input

I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/
jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});
Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});

Display Content div onclick of nav item

Question : Beginner Level
Code: Pure Javascript
I had created a web page in which i am rendering the main nav items via a for loop in javascript. Below the main nav i had created some content assigned each main content div with different ids.
Now i want onclick of any nav item, respective content div should be displayed. please find the jsfiddle link : http://jsfiddle.net/shabirgilkar/GKLJz/1/
May i know how to do that in pure javascript. Any help will be highly appreciated.
Provided your text inside the navigation boxes match the id of the div.contents This code should work.
Hope i helped.
old="home";
function init() {
document.getElementById('about').style.display = 'none';
document.getElementById('products').style.display = 'none';
document.getElementById('services').style.display = 'none';
document.getElementById('career').style.display = 'none';
document.getElementById('faq').style.display = 'none';
document.getElementById('contact').style.display = 'none';
var pages = document.querySelectorAll('a.box');
for(i=0;i<pages.length;i++){
pages[i].onclick=function(e){
document.getElementById(old).style.display='none';
old=e.target.innerHTML.toLowerCase();
document.getElementById(old).style.display='inline-block';
}
}
}
Ok, I updated your fiddle: http://jsfiddle.net/GKLJz/3/
The trick is that you assign ids to menu items in your array and than you call onClick function that switches css classes accordig to what you click on...
And if you want to make it pretty, use some js animation effect instead of changing classes, like jQuery slide described here
Btw you can ommit init() function entirely an just assign .hidden to other divs as default

Categories

Resources