SlideUp slideDown - javascript

i have this javascript code:
var x="#wrapper"
//var xyz;
$(document).ready(function(){
$("#about").click(function(){
if (!(x=="#about")){
$(x).slideUp("slow",function(){
$("#aboutus").slideDown("slow");
});
x="#aboutus";
}
});
});
$(document).ready(function(){
$("#home").click(function(){
if(!(x=="#wrapper")){
$(x).slideUp("slow", function(){
$("#wrapper").slideDown("slow");
});
dd="#wrapper";
}
});
});
with this "menu"
<nav>
<div class="menu">
<ul class="ul">
<h6>
<li id="home" >Home</li >
<li id="about">About</li >
<li >performance</li >
<li >testimonials</li >
<li >faqs</li >
<li >forum</li >
<li onclick="slideUpDown()">Contact </li >
</ul>
</h6>
</div>
</nav>
I must use the the li tags as links and when I click the about "link" the home div must slide up slowly and the about div is supposed to come down slowly.
please help!
thank you in advance

In the last line of your code, set x to #wrapper not dd:
var x="#wrapper"
//var xyz;
$(document).ready(function(){
$("#about").click(function(){
if (!(x=="#about")){
$(x).slideUp("slow",function(){
$("#aboutus").slideDown("slow");
});
x="#aboutus";
}
});
$("#home").click(function(){
if(!(x=="#wrapper")){
$(x).slideUp("slow", function(){
$("#wrapper").slideDown("slow");
});
x="#wrapper";
}
});
});

I came on this nice one a while ago. It is simple and works.
function toggleForm(x) {
if ($('#'+x).is(":hidden")) {
$('#'+x).slideDown(200);
} else {
$('#'+x).slideUp(200);
}
}
Then to call it ...
onmousedown="javascript:toggleForm('div_ID');
and to not change your URL add this in front on the same call
onclick="return false"
with this, you can use one script to call as many slid operations as you want. The div to be targeted is the one that has its ID in the call.
EDIT: sorry ... Just noted that it is jQuery, but should not affect anything. I used it where other jQuery did not. So does not seem to conflict anywere.

Related

list item stay open on click a link or reload/refresh page

I want that my unordered list stays open if I click a list-item/link or I refresh/reload the page/site. And the list-item/link should have the class active.
Saw something, that I can store data in local-storage, but I do not know how.
HTML:
<aside id="sidebar" class="col-12 col-lg-4 col-xxl-3">
<div class="just-padding">
<ul>
<li id="server">Server</li>
<ul>
<li id="multiCollapseExample1">
<span>
Start
</span>
</li>
<li id="multiCollapseExample2">
<span>
Security
</span>
</li>
</ul>
<li id="git">GIT</li>
<ul>
<li id="multiCollapseExample3">
<span>
blub
</span>
</li>
<li id="multiCollapseExample4">
<span>
wurst
</span>
</li>
</ul>
</ul>
</div>
</aside>
jQuery:
$(document).ready(function () {
$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();
$("#server").click(function() {
localStorage.setItem('clickedItem', '#server');
$("#multiCollapseExample3, #multiCollapseExample4").hide();
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
$("#git").click(function() {
localStorage.setItem('clickedItem', '#git');
$("#multiCollapseExample1, #multiCollapseExample2").hide();
$("#multiCollapseExample3, #multiCollapseExample4").show();
});
$("#multiCollapseExample1").click(function() {
localStorage.setItem('clickedSub', '#multiCollapseExample1');
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
$("#multiCollapseExample2").click(function() {
localStorage.setItem('clickedSub', '#multiCollapseExample2');
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
if(localStorage.getItem('clickedSub')) {
var test = $(localStorage.getItem('clickedSub')).click()
$(test).addClass("active");
};
if(localStorage.getItem('clickedItem')) {
$(localStorage.getItem('clickedItem')).click()
$(this).addClass("active");
};
});
I have edited my answer (the jquery part)
A new JSFiddle:
JSFiddle
The active list item in red do not save the state if I go back (backwards / browser arrow). But it keep the state on reload/refresh.
I have modified your code as you wanted. Please check jsfiddle
What i did was just set the clicked item to localstorage. I have saved its id..
Then when refresh the page i check does localstorage exist the key added to localstorage(it should exist if you clicked a item). Then based on that value I have clicked the related item via click() method.
Just modified your Jquery as bellow
$(document).ready(function () {
$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();
$("#server").click(function() {
localStorage.setItem('clickedItem', '#server');
$("#multiCollapseExample3, #multiCollapseExample4").hide();
$("#multiCollapseExample1, #multiCollapseExample2").show();
});
$("#multiCollapseExample1").click(function() {
$("#multiCollapseExample1, #multiCollapseExample2").show();
$("#multiCollapseExample1").addClass('active');
});
$("#git").click(function() {
localStorage.setItem('clickedItem', '#git');
$("#multiCollapseExample1, #multiCollapseExample2").hide();
$("#multiCollapseExample3, #multiCollapseExample4").show();
});
$("li span").click(function() {
$(this).addClass("active");
});
if(localStorage.getItem('clickedItem')) {
$(localStorage.getItem('clickedItem')).click()
}
});
By the way I dont recommend you to use ids to click event. So if there are 100 items then based on your code you need to write more and more logic. Instead of that use another mechanism to achieve this. Thanks

How Get Name Class With Javascript?

Hi everyone i need get name class menu li for load this page
html
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
js
$(document).on('click','.menu li',function(){
var Get_Name_Class = //Get Name Class
if(/* var Get_Name_Class*/).hasClass("page2")) {
$(".load").load('page2.php');
}
else if(/* var Get_Name_Class*/).hasClass("page3")) {
$(".load").load('page3.php');
}
});
how can i this ( get id or class not difference )
Use this to refer the clicked element inside the handler callback.
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
You can do it using jQuery. If it is class you can do:
$(".className")
if it is id you can do:
$("#idName")
if it is just html element you can do:
$("elementName")
Pass this.className with ".php" concatenated to .load()
$(document).on('click','.menu li',function() {
$(".load").load(this.className + ".php")
});
$(document).on('click','.menu li',function(){
// cache the reference
var $this = $(this);
// check using the cached element
if($this.hasClass("page2")) {
$(".load").load('page2.php');
}
else if($this.hasClass("page3")) {
$(".load").load('page3.php');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="menu">
<ul>
<li class="page2" id="page2">PAGE TOW</li>
<li class="page3" id="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>
</body>
use "#" symbol for id so your code becomes
("#idname")
or u can use "this" which points to the present class u are working on
Don't use classnames. One day you'll add an extra class to those elements and your site will stop working and you'll be left wondering why - or in the worst case it'll slip unnoticed.
Say you have one or even more buttons for page2 triggering - than it's the perfect place to use the data-* attribute!
$(document).on('click', '[data-load]', function() {
var page = $(this).data("load");
console.log(page); // Just to test
$(".load").load(page +'.php');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-load="page2">PAGE TWO :) me too</a>
<div class="menu">
<ul>
<li data-load="page2">PAGE TOW</li>
<li data-load="page3">PAGE THREE</li>
</ul>
</div>
<div class="load"></div>

Dropdown menu, anchor doesn't work

I have made a dropdown menu and it works fine, except the anchor (a href="#") does not work.
I think the script has something wrong, but I can't figure it out.
Can anyone can help me please?
<ul class="menu">
<li class="listMenu on">
<a class="depth1" href="#">aaa</a>
<div class="depth2Wrap">
<ul class="depth2">
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
</li>
<li class="listMenu"><a class="depth1" href="d.html">ddd</a></li>
</ul>
$(function($) {
var li = $('.menu>.listMenu');
li.addClass('off');
$('.menu .on').find('.depth2Wrap').show();
$('.menu>.listMenu>a').click(function() {
var myArticle = $(this).parents('.listMenu:first');
if(myArticle.hasClass('off')){
li.addClass('off').removeClass('on');
li.find('.depth2Wrap').slideUp(100);
myArticle.removeClass('off').addClass('on');
myArticle.find('.depth2Wrap').slideDown(100);
li.removeClass('fir_sele');
} else {
myArticle.removeClass('on').addClass('off');
myArticle.find('.depth2Wrap').slideUp(100);
li.removeClass('fir_sele');
}
return false;
});
});
Remove the following
return false;
return false tells the browser not to complete the default action, which is following the link.
See What's the effect of adding 'return false' to a click event listener?

changing value of unordered list when selecting li item

My question is, how do i change value of original element in UL list, after selecting/picking one li item under.
Example: I want to pick City3 and when i do, instead of "Pick City" it should be the value of "city3".
This is my jsfiddle.
This is HTML:
<div class="menu1">
<li class="naslov"><b>Pick City</b></li>
<div class="submenu1">
<ul id="sel">
<li value="1"><b>City1</b></li>
<li value="2"><b>City2</b></li>
<li value="3"><b>City3</b></li>
<li value="4"><b>City4</b></li>
<li value="5"><b>City5</b></li>
</ul>
</div>
Also is it possible not to change any of the css/html(With that i mean, i dont want to add select,option elements), and make it work just over some JQuery/JS functions?
Thanks,
Milos
$('#sel a').click(function(){
$('li.naslov b').html(this.innerHTML);
return false;
});
Live DEMO
Try this as your JS...
$(document).ready(function(){
$('.menu1').hover(function(){
$('.submenu1').stop(true).slideToggle('slow');
});
var orig = $(".naslov").html();
$("#sel li").hover(function(){
$(".naslov").html($(this).text());
}, function(){
$(".naslov").html(orig);
});
});
Another possible way to do this. In this case, the li could be dynamic, based on an AJAX feed or some other JavaScript.
$('#sel').on('click','li',function() {
$('li.naslov b').text($(this).text());
});
jsFiddle

JQuery .css() on variable div id

I'm just going to build a nice hover menu.
There are various divs to be displayed when the user moves the mouse over the menu.
Here is my HTML Code:
<ul class="menue">
<li>Startseite</li>
<li id="1">Menü1</li>
<li id="2">Menü2</li>
</ul>
<div class="subMenue" id="2">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>
And here is the JS:
$(document).ready(function() {
$(".menue li").mouseover(function(){
if($(this).attr('id')){
$(".subMenue #" + $(this).attr('id')).css("display", "block");
}
}).mouseout(function(){
$(".subMenue #" + $(this).attr('id')).css("display", "none");
});
});
How can I get now is that if I go over the <li> with id 1, the <div> with the id 1 rises?
With the possibility of mine described above it is not unfortunately.
You have issues like:
Duplicate ID being used. Your selector will end up having issues apart from having invalid html.
Selector incorrect .subMenue #1 should be .subMenue#1.
You can use a custom data-target attribute on li's to provide the target's selector (to avoid any string concatenation for calculating the target's id and flexibility of having any kind of selector with any nesting) instead of ids and just do $(".subMenue" + $(this).data('target')) to select the respective elements. This is kind of pattern framworks like bootstrap follows.
Try this way:
Html
<ul class="menue">
<li>Startseite</li>
<li data-target="#1">Menü1</li>
<li data-target="#2">Menü2</li>
</ul>
<div class="subMenue" id="1">Test-Menue1</div>
<div class="subMenue" id="2">Test-Menue2</div>
Script
$(document).ready(function() {
$(".menue li").mouseover(function(){
$(".subMenue" + $(this).data('target')).css("display", "block");
}).mouseout(function(){
$(".subMenue" + $(this).data('target')).css("display", "none");
});
});
Fiddle
As a shortcut you can even use a one liner using .toggle()
$(document).ready(function() {
$(".menue li").hover(function(){
$(".subMenue" + $(this).data('target')).toggle();
});
});
If you are not having the URL's point anywhere, I would recommend changing your structure slightly.
<ul class="menue">
<li>Startseite</li>
<li>Menü1</li>
<li>Menü2</li>
</ul>
<div class="subMenue initial" id="submenu-1"><a name="submenu-1"></a>Test-Menue1</div>
<div class="subMenue" id="submenu-2"><a name="submenu-2"></a>Test-Menue2</div>
It may be useful to add in a few more features, such as hiding your elements with Javascript in case someone tries to visit without Javascript enabled, then the links will point to the named anchors.
$(document).ready(function() {
$(".subMenue").not(".initial").css("display", "none");//hide all but the initial div
$(".menue li").hover(function(){
$("#"+$(this).attr("href")).css("display", "block");
},
function(){
$("#"+$(this).attr("href")).css("display", "none");
});
});
html
<ul class="menue">
<li>Startseite</li>
<li class="menu" data-id="sub1">Menü1</li>
<li class="menu" data-id="sub2">Menü2</li>
</ul>
<div class="subMenue" id="sub1">Test-Menue1</div>
<div class="subMenue" id="sub2">Test-Menue2</div>
js
$(document).ready(function() {
$('.menue > li.menu').mouseenter(function(){
$('#' + $(this).data('id')).css('display', 'block');
}).mouseleave(function(){
$('#' + $(this).data('id')).css('display', 'none');
});
});

Categories

Resources