Next and Previous Navigation by showing corresponding DIV - javascript

I am in the lookout for a script that can show one DIV at a time and Hide the rest (2 in the example I took)additionally I want the user to navigate back and forth
i.e
Once the user clicks next DIV 1 is displayed so on till DIV3
He should also be able to traverse from DIV2 - DIV1 and so on
I did find this development interesting
http://jsfiddle.net/meetrk85/Y7mfF/
Thanks a billion in advance.....

Given the following HTML:
<div class="sample">div1</div>
<div class="sample">div2</div>
<div class="sample">div3</div>
next
prev
The following jQuery seems to achieve your requirements:
// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.sample').hide().first().show();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
// prevents the default action of the link
e.preventDefault();
// assigns the currently visible div.sample element to a variable
var that = $('div.sample:visible'),
// assigns the text of the clicked-link to a variable for comparison purposes
t = $(this).text();
// checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
if (t == 'next' && that.next('div.sample').length > 0) {
// hides all the div.sample elements
$('div.sample').hide();
// shows the 'next'
that.next('div.sample').show()
}
// exactly the same as above, but checking that it's the 'prev' link
// and that there's a div 'before' the currently-shown element.
else if (t == 'prev' && that.prev('div.sample').length > 0) {
$('div.sample').hide();
that.hide().prev('div.sample').show()
}
});​
JS Fiddle demo.
References:
first().
hide().
next().
on().
prev().
show().
text().
:visible selector.
Addenda:
A quick explanation of why I changed the html in the linked demo:
<div name="sample">div1</div>
<div name="sample">div2</div>
<div name="sample">div3</div>
<a href="#" id="display" value="display">next</div>
<a href="#" id="display1" value="display">prev</div>
The name attribute, in a div serves no purpose. Certainly not if all the elements are sharing the same name (they're not input elements, they're linked-to by an a, so use a class name).
The value attribute has no association with an a element, and serves, so far as I can tell, no purpose. For this, in the script above, I chose, again, to use a class name, since the same 'value' of the attribute was shared, though a data-* attribute could have been used, and would have been valid.
The closing </div> tags weren't closing anything, so they were changed to </a>.

Related

Make multiple data 'visible' or 'hidden' using CSS and Javascript

I need your support in selecting a logic. My script pulls few rows from DB and displays on screen. I want to give a feedback form for each data. These feedback forms must be hidden and should be visible on click of a text (Like reply to this) - Pls refer the picture.
I have tried with the help of java script and CSS
<script>
function hideElement()
{
document.getElementById("target").style.display="none";
}
function showElement()
{
document.getElementById("target").style.display="block";
}
</script>
// Data-1 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 1 here
</span>
// Data-2 fetched from DB goes here
<a href='#target'>Reply to this post</a>
<span id='target' style='display:none'>
// Feedback form for Data 2 here
</span>
But it works only for the first record, - Javascript finds the first object with the name "target" and sets display property 'none' or 'block'
What logic can I use to generate dynamic ID assigned to each record and make java sript to run for that. Are there any other better logics to do this? (I'm sure ther are)
Element IDs must be unique, but any time you find yourself generating unique IDs for repeating elements there's probably a simpler, more generic way to implement whatever you're doing.
For this type of function you don't need IDs at all, you can use classes and DOM navigation to get from the clicked item to the related span, using a single delegated event handler as follows:
// bind click handler to the document
document.addEventListener("click", function(e) {
// test if the actual clicked item has the class "reply"
if (e.target.className.match(/\breply\b/)) {
e.preventDefault();
// find the related target span
var target = e.target.parentNode.querySelector(".target");
// update its visibility
target.style.display = target.style.display === "none" ? "block" : "none";
}
});
<div> <!-- note added wrapper div -->
Reply to this post
<span class='target' style='display:none'>
Feedback form for Data 1 here
</span>
</div>
<div> <!-- note added wrapper div -->
Reply to this post
<span class='target' style='display:none'>
Feedback form for Data 2 here
</span>
</div>
I've put some comments within the above JS to explain what it's doing, but the important line is this one:
var target = e.target.parentNode.querySelector(".target");
Within the event listener, the e argument is the event object which holds various bits of information about the event being handled. e.target tells which element was clicked. Having already tested that element's class to see if it was one of the "reply" anchors, we then use the .parentNode property to get a reference to the wrapper div that I added to your markup, then from there .querySelector(".target") finds a descendant of the div that has the class target.
As you can see I've modified your html to support the above as follows:
Change the span ids to be classes
Given the anchors class="reply"
Added wrapper div elements for each group, to make the DOM navigation simple and reliable. You could navigate from the anchor to the span using e.target.nextSibling, except then you'd have to add extra code to skip over any text nodes. I find a wrapper element easier to work with. Of course, if your elements are already in some kind of wrappers for other purposes then you can just use the existing wrappers.
Note: it would be good to remove the inline styles, and to show and hide the spans by adding and removing classes rather than directly updating their styles, but that's not really the main issue here so I'll leave that as an exercise for the reader.
http://codepen.io/sheriffderek/pen/BzmAwg
Step 1: ditch those IDs
markup
<ul class="item-list">
<li>
<p>default stuff</p>
<div class="hidden-thing">
hidden stuff
</div>
</li>
<li>
<p>default stuff</p>
<div class="hidden-thing">
hidden stuff
</div>
</li>
<li>
<p>default stuff</p>
<div class="hidden-thing">
hidden stuff
</div>
</li>
</ul>
Step 2: hide the hidden stuff in CSS and not inline
styles
(this is stylus syntax.. but same point)
.item-list
list-style: none
margin: 0
padding: 0
li
background: gray
padding: .5rem
margin-bottom: 1rem
cursor: pointer
.hidden-thing
display: none // hide it
Step 3: get the thing you want to click with jquery or with vanilla JavaScript - attach event handler - use this to note what element the event happens on - with that element... traverse down the DOM and find the thing you want - then use the show method, whichs sets display: block... or fadeIn() or animate() or whatever you like.
JavaScript
$('.item-list li').on('click', function() {
$(this).find('.hidden-thing').show();
});
// or...
$('.item-list li').on('click', function() {
$('.item-list li').find('.hidden-thing').hide();
$(this).find('.hidden-thing').show();
});
If you want only one hidden thing open at a time, you can hide all the items each time first - which is kinda janky, but usual.
BUT... there is a better way to do this, where you add an active class to the whole item. This lets you style things inside it and just generally gives you a larger scope to work with. Here is an example of that. : ) It uses .closest - and passes the event into the click handler to stop the outer click action from bubbling up: http://codepen.io/sheriffderek/pen/oLoqEy

Disable parts of HTML code from a script

I need to disable some HTML code from a script that is parsed into a div box with a specified ID. I have no access to the source of the script. Just for example let's assume the script parses some headings <h1> with some text and some lists <ul> with some items <li>.
Some months ago I found a way to disable some parts of the code matching a specific pattern, but I can't remember how this works or how this was called. How can I disable every <h1> tag parsed into the div box?
EDIT: What I need is to find every tag with the pattern <h1> and let the browser ignore it.
h1 can only be made invisible or hidden.
This can be easily accomplished using jQuery like:
.hide(), or .css('display', 'none')
The above will remove the element from the layout thus the space occupied by this element collapses.
.css('visibility', 'hidden')
The above will make the element transparent but the space is still occupied.
For some other elements such as button or input, they can be made disabled, such as:
<button type="button" disabled>Click Me!</button>
or
jQuery 1.6+:
.prop('disabled', true);
jQuery 1.5 or below:
.attr('disabled', 'disabled');
Not sure what you mean by disabled but you can hide them easily with JQuery?
$('#thediv h1').hide();
You can just find all of the children of a certain item by tag name, and then remove them from the DOM. They will still exist, but they won't be attached to the DOM anymore.
The HTML:
<div id="box">
<h1>Inside the box</h1>
</div>
<h1>Outside the box</h1>
The JavaScript:
var box = document.getElementById('box');
var headers = box.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
box.removeChild(headers[i]);
}
JSFiddle example.

Is it possible to access all child of a div with jQuery

Is it possible to select a div's all child divs with a specified class using jQuery?
For example:
If I click on a div it should toggle the clicked .name div's all children with .content class(div1,div2,div3).
The html:
<div class="name">
Name of div 1
<div class="content">
Content of div 1
</div>
<div class="name">
Name of div 2
<div class="content">
Content of div 2
</div>
<div class="name">
Name of div 3
<div class="content">
Content of div 3
</div>
</div>
</div>
</div>
The script:
$(function()
{
$('.name').click(function()
{
$(this).children('.content').slideToggle();
});
});
I've tried this script, but it's select the divs on the first level only.
First let me explain an issue as result what you're trying to do
If you decide to click on DIV 2 the CONTENT 2 and 3 should open,
but if than you click DIV 1 a total mess will happen:
DIV 1 will open but all the other will close.
EXAMPLE WITH ISSUE (PRESENT IN OTHER ANSWERS)
To prevent that
you should store the is clicked or not state directly into the clicked DIV
WORKING EXAMPLE
$('.name').click(function(ev){
ev.stopPropagation();
var io = this.io ^= 1; // Toggle 1/0 state
$('.content', this)[io?"slideDown":"slideUp"](function(){
$(this).closest('.name')[0].io = io; // Store state also to all other
});
});
ev.stopPropagation(); prevents the click to navigate up the DOM triggering the same function on not targeted elements (with same className)
var io = this.io ^= 1; toggles using the XOR ^ bitwise operator a 1/0 value (later used as boolean) directly into the element Object custom io (or name it as you like) property (or name it as you like).
Than what we do is: by using the Conditional Operator (?:) we use the toggled this.io value 1 or 0 as boolean, and if value is 1 (true) do a slideDown else, logically a slideUp for every $('.content', this) (.content, children of this)
if we did not used an additional function callback for the slide, you might get the issue of the need to double-click some DIV elements, cause the io value of that particular element was not up to date for it's state, so to change that we just need to set for every slided element the same io state to the .name (the toggler) (.closest()) parent.
Your code works, but the click is propagation. A click inside an inner name is also a click inside the outer name. Add this :
$('.name').click(function(e)//pass the event
{
e.stopPropagation(); // prevent the event from bubbling.
$(this).children('.content').slideToggle();
});
Also, you are using .children, which targets direct children only. If you want all childrens (descendants), use .find().
You need to stop propagating the event so that it doesn't bubble up the tree -
$('.name').click(function(e) {
e.stopPropagation();
$(this).find('.content').slideToggle();
});
http://jsfiddle.net/jayblanchard/sSRJ4/

select a parent with jQuery

Hello I have some HTML that looks like this,
<div id="music_interests">
<ul class="interests">
<li >
<div class="interest inline">
<img src=""/>
<div class="interest_popup">
1 users have this interest.
Remove interest </div>
</div>
</li>
</ul>
When users clicks the remove button I need to select the parent div (in this case music_interests). How would I go about that?
I have tried doing the following,
$(this).parent().parent().parent().parent() but is there a more elegant way?
To complicate things futher I will not actually no the parents ID when in the app as the remove button occurs in 4 or 5 different areas on the page.
you should use closest()
$(this).closest('div#music_interests');
//find the nearest div with id "music_interests"
//if i omitted the id, it retrieves the div with class "interest_popup"
or parents()
$(this).parents('div:eq(1)');
//get ALL the ancestor divs (until it reaches root tag)
//since music_interests is just 2 levels up, use :eq(1)
If the ID of the DIV you want to remove is static you should only use the ID selector (not something like $("div#music_interests")) as the ID selector is directly mapped to the DOM function document.getElementsById which is pretty fast:
$("#music_interests").remove();
If the ID isn't static you could get the UL just like that:
$(function(){ //execute when page has been loaded
$(".remove").click(function(){ //attach click handler
var removeDiv = $(this).closest("ul").parent().remove(); //get next UL -> DIV is its parent
return false; //stop further processing of "click" event
});
});
if remove button always exist in ul tag (in all your 4 or 5 different areas) then you can use the following code.
$(this).closest("ul").parent()
in this case u don't even need to give id to DIV tags

Hiding elements with a specified id

I have two different divs
var promptContent = $('<div id="errorr">').addClass("formErrorContent").html(promptText).appendTo(prompt);
var arrow = $('<div id="errorrarrow">').addClass("formErrorArrow");
I want to use their id in javascript like this
function windowclose()
{
document.getElementById('add_project').style.display="none";
document.getElementById('blanket').style.display="none";
document.getElementById('errorr').style.display="none";
document.getElementById('errorrarrow').style.display="none";
// $("#blanket").fadeIn("none");
// $("#add_project").fadeIn("none");
}
But here it hides only the 1st div. I want to hide all the divs with the same id. How can I do this?
Choose between to use name or id:
getElementsByName('errorr') searches in the DOM an element named errorr
getElementById('errorr') searches in the DOM an element with the id equals to errorr;
Try to change your code:
document.getElementsByName('errorr').style.display="none";
document.getElementsByName('errorrarrow').style.display="none";
to
document.getElementById('errorr').style.display="none";
document.getElementsById('errorrarrow').style.display="none";
also note that a DOM must have all unique IDs (as rule)
UPDATE:
Well, if you need to hide a set of divs I usually add at all of them a class like .element-to-hide:
<div id="asd" class="element-to-hide">...
<div id="lol" class="element-to-hide">...
<div id="foo" class="element-to-hide">...
Ant after just a touch of jQuery:
$('.element-to-hide').each(function(){
$(this).hide();
});
Hope this help
Even though using the same ID on many elements is semantically invalid, you could do it in a single jQuery line.
$('#errorr, #errorrarrow').hide();

Categories

Resources