replacing div content with a click using jquery - javascript

I see this question asked a lot in the related questions, but my need seems very simple compared to those examples, and sadly I'm just still too new at js to know what to remove...so at the risk of being THAT GUY, I'm going to ask my question...
I'm trying to switch out the div contents in a box depending on the button pushed. Right now I have it working using the animatedcollapse.toggle function, but it doesn't look very good. I want to replace it with a basic fade in on click and fade in new content on next button.
Basic idea:
<div>
<ul>
<li><a href="this will fade in the first_div"></li>
<li><a href="this will fade in the second_div"></li>
<li><a href="this will fade in the third_div"></li>
</ul>
<div class="first_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="second_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="third_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
I've got everything working with the animated collapse, but it's just an ugly effect for this situation, so I want to change it out.
Thanks!
Joel

Joel, I think I understood what you wanted. Does this look right? In the code below I also used a convention where you append js to the class attribute on HTML so you can style your JS bits differently. If JS were disabled, all three tabs would show down in order. However, as long as JS is enabled, your code will display as desired.
You could improve this by dynamically setting the height of the #animators div based on the tallest height of the children, but it was getting complex enough as it was!
I changed your HTML a bit (both for testing and functionality.):
<div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="animators">
<div class="container">
<ul>
<li>stuff1</li>
<li>stuff1</li>
<li>stuff1</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff2</li>
<li>stuff2</li>
<li>stuff2</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff3</li>
<li>stuff3</li>
<li>stuff3</li>
</ul>
</div>
</div>
</div>
Add this to your CSS:
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0 }
And use this JavaScript:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
// Fade in new div if not already showing
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>
EDIT Here is an alternate JavaScript block that fadesOut then fadesIn:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut(1000, function(){
$target.not(':visible').fadeIn(1000);
});
} else {
$target.not(':visible').fadeIn(1000);
}
e.preventDefault();
})
})
});
</script>

Looks like toggle supports a speed setting...maybe that would be more elegant?

How about a JQuery fade out - http://docs.jquery.com/Effects/fadeOut and then your callback is a fade in?
..I just saw your link in the comments, that is exactly what they are doing on CSS tricks. Do you have a more specific question?
UPDATE
The visible class refers to the div that will be visible...haven't tested this but it should be about right
$('.first_container').click(function(){
$('.visible').fadeOut(3000,function(){
this.removeClass('visible');
$('.first_container').addClass('visible');
$('.first_container').fadeIn(3000);
});
})
That is the code to reference your first_container....you can go from there

If i've understood your question properly, this may be helpful for you
<div id="LoadMe2"><h3>Please select what to edit!</h3></div>
<script>
$('a').click(function() {
$('#LoadMe2').load($(this).attr('href'));
return false;
});
</script>
and html can be like
<input type="button" value="edit Header menu">
EDIT
sorry this helps you to fetch the content from those pages and displays it.
keeping this post as someone else may need this

Related

JQuery each function toggle class

So i have some code like this
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
Then i use a JS code like this
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){
$(".Menu").fadeIn(800).slideDown(800);
});
});
But when i using this, all the ".Menu" element will be fade in :(
Please correct my code...
You need to target the specific .Menu that is the one next to this. ELse it will target all element with .Menu class. You can use jquery next
$("ul li .SplitCtrl").each(function(index) {
$(this).on("click", function(){ //changed here
$(this).next(".Menu").fadeIn(800).slideDown(800);
});
});
Check out this JSFIDDLE
jQuery doesn't know which element to open because there are no id's assigned to the menu items. So it opens everything in the .SplitCtrl class because it doesn't know any better. If you assign some id's to the elements, then it will know what to open and when. Using your code so as to minimize modifications, the following will work for you. Note the addition of id's to both of the .SplitCtrl items and the .Menu items, and using the click function and passing in the id of the item that the click originated from. If you embed further elements, this will still work in the case that it isn't the next element following your class, or if you want it to trigger other items on the page in addition to the menu items.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example
>
<div class="Menu" id="menu1" style="display:none;">
Some thing
</div>
</li>
<li>Example
>
<div class="Menu" id="menu2" style="display:none;">
Some thing
</div>
</li>
<li>Example</li>
</ul>
<div id="surprise1" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
In order to toggle the items, you can add something that first hides everything that's open and then makes the newly selected item visible:
//...same code as above to this point
<div id="surprise1" class="Surprise" style="display:none;">Now I'm open too!</div>
</body>
</html>
<script>
$(document).ready(function() {
$("ul li .SplitCtrl").click(function(event){
var item = '#menu' + event.target.id;
var surprise = '#surprise' + event.target.id;
$(".Menu").fadeOut(100); // Hide all items of class .Menu
$(".Surprise").fadeOut(100); // Hide other items of class .Surprise
$(item).fadeIn(800).slideDown(800); // open the menu item
$(surprise).fadeIn(800).slideDown(800); // open another element
});
});
</script>
So now, all the .Menu items in that class are toggled off before the new one is displayed (even though only one displays at a time). Note the added class for "Surprise" to be able to hide all the external elements as well. There are lots of ways to toggle items so this is just one way you could accomplish it.

Opening a div on mouse over and staying open until mouse is moved out?

I have my markup like this:
<div class="wrapper-header">
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav">
<li class="">Show Categories</li>
</ul>
</div>
</div>
<div class="wrapper-categories">
<div class="container">
Content Here
</div>
</div>
The .wrapper-categories is display: none; by default, so it only shows once clicked with:
$(".toggle").on('click', function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
$(this).html(function(i,html) {
if (html.indexOf('Browse') != -1 ){
html = html.replace('Show','Hide');
} else {
html = html.replace('Hide','Show');
}
return html;
});
});
Now, I'd like to change that to showing on hover instead of on click, with the .wrapper-categories staying open if someone moves their mouse over and closing if it's not on the link or the content div anymore.
I tried replacing changing it to $(".toggle").hover(function() { and that worked, but it's not staying open. What else must I do?
Your code isn't working the way you desire is because the hover event of .toggle works only for itself. As soon as you try to move the mouse cursor over its contents i.e, under .wrapper-categories, the cursor goes out of the .toggle scope.
Here's a working example of how you need to implement this. You need to slightly change the structure of the menu you want to create using a simple structure of ul and li.
Here's is the FIDDLE.
HTML:
<ul class="nav navbar-nav">
<li class="menu">Show Categories
<ul>
<li>
Content Here
</li>
<li>
Content Here
</li>
<li>
Content Here
</li>
</ul>
</li>
</ul>
JS:
$(".menu").mouseover(function(){
$(this).find('ul').css('visibility', 'visible');
});
$(".menu").mouseout(function(){
$(this).find('ul').css('visibility', 'hidden');
});
CSS:
.menu > ul{
visibility:hidden;
}
.menu > ul > li:hover{
font-weight:bold;
}
Here is the solution for your problem.
https://jsfiddle.net/44wrL4g4/2/
I wrapped all in a menu class.
And I have used mouseleave() instead of mouseout(). See the Jquery documentation for these functions.
See the code for further understanding.

Removing mark-up from unordered list with jquery

In the follow content I need to remove the mark-up tags <div class="sub"> and </div> but not it's content with jquery. This is to adapt the menu to a responsive layout.
<nav id="top">
<ul>
<li class="ti" id="snw"> <a class="mm" href="/snowdepth/">Weather</a>
<div class="sub">
<ul>
<li><h2>Snowline</h2></li>
<li>Nordliche Ostalpen</li>
</ul>
</div>
</li>
<li class="ti" id="blg"> <a class="mm" href="/live/">Weblog</a></li>
</ul>
</nav>
Try unwrap():
​$('.sub').find('ul').unwrap()​;
Essentially, you are looking for all the child elements of .sub, and unwrapping them or removing their parent.
Here's the demo: http://jsfiddle.net/yEseX/
You can do it this way.
Live Demo
$('.sub').parent().html($('.sub').html());
Supposing you may have more than one div with class sub, I'd suggest this :
var container = $('#top');
container.html(
container.html().split('<div class="sub">').join('').split('</div>').join('')
);
Try this,
var content = $(".sub").html(); // stored ".sub" div content
$(".sub").remove(); // remove ".sub" div
$("#top #snw").after(content); // insert content where you want
Try this:
var list = $('#snw');
var html = list.html();
list.html(html.replace('<div class="sub">','').replace('</div>',''));
Demo here
I think #Abhilash's answer is the neatest so far, but I would modify the selector slightly:
$('.sub').contents().unwrap();
This removes all of the .sub elements, leaving their contents in place.
JsFiddle: http://jsfiddle.net/yEseX/2/

Reveal Div and Hide others in Dojo

I am creating some custom navigation in Dojo and am struggling with the final piece of the jigsaw a bit. Basically when hovering over a link with the class "navSectionTitle" a div will be revealed containing more links. However when this happens I would like to hide all other div's that are currently revealed. My mark up below might show what I am trying to achieve :
<div class="navElement">
Home Appliances +
<div class="subMenuHolder">
<ul>
<li>Washing Machines,</li>
<li>Vacuum Cleaners,</li>
<li>Microwaves,</li>
<li>Ovens,</li>
<li>Coffee Makers,</li>
<li>Toasters,</li>
<li>More +</li>
</ul>
</div>
</div>
<div class="navElement">
Furniture +
<div class="subMenuHolder last">
<ul>
<li>Bedroom Furniture,</li>
<li>Kitchen Furniture,</li>
<li>Living Room Furniture,</li>
<li>Outdoor Furniture,</li>
<li>Office Furniture,</li>
<li>Book Shelves,</li>
<li>More +</li>
</ul>
</div>
</div>
So when on link is hover on its closet subMenuHolder div will be revealed, however I would then like to hide any other subMenuHolder div's that are open. A snippet of my code is below:
dojo.query(".navSectionTitle").forEach(function(node, index, nodelist){
dojo.connect(node , "onmouseover", function(evt){
dojo.query(node).next('.subMenuHolder')[0].style.display = 'block';
});
});
I have tried various methods but do not be able to achieve the results I am looking for any help would be greatly appreciated.
To use the next() function after a query, you need to have required "dojo.NodeList-traverse":
dojo.require("dojo.NodeList-traverse");
Here's an example of how you can do it.
dojo.query(".subMenuHolder").forEach(function(n) {
var l = dojo.query(n);
l.parent().at(0)
.onmouseenter(function(){
dojo.style(l[0], "display", "block");
})
.onmouseleave(function(){
dojo.style(l[0], "display", "none");
});
});
I'm assuming you have your .subMenuHolders hidden by default here.

How can I activate a style class on click using Mootools or Javascript?

I would like to create a tab view for my php application using Mootools. I have n number of tabs created from php script. My view is as follows.
<div>
<ul id="1">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
<div>
<ul id="2">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
...
<div>
<ul id="n">
<li>Popular</li>
<li>New Addition</li>
</ul>
</div>
How can apply style class active according to the clicks on Populalar or New Addition under each tabs.
Thanks
var tabs = document.getElements('li');
tabs.addEvent('click', function() {
tabs.removeClass('active');
this.addClass('active');
});
Try an example.
Here's how to do it in MooTools:
var activeElement = null;
$$('div ul li'
/* you probably want a better selector,
how about giving a parent element an id? */
).each(function(item){
item.addEvent('click',function(event){
$(event.target).addClass('active');
if(activeElement != event.target){
if(activeElement!=null)
$(activeElement).removeClass('active');
activeElement = event.target;
}
});
});
Update: Here's an improved version, thanks #steweb, source:
$$('#containerID li').each(function(item){
item.addEvent('click',function(event){
// minor improvement to steweb's code,
// restrict to .active inside container
$$('#containerID .active').removeClass('active');
this.addClass('active');
});
});
It requires the root div to have the id "containerId":
<div id="containerId">
<ul id="1">
<!-- etc -->
object.className = 'active';
( Where object is what you want to highlight )

Categories

Resources