Have been trying to perform a DIV hide show on a page of my website.
It was working fine with plain javascript but noticed it was not working when simulated on mobile devices..after bit of research I changed my code to the following, is there anything wrong in it ?
<script>
$(document).ready(function() {
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
//portfolioBtn.onclick = function () resultsBtn.onclick = function ()
$('#portfolioBtn').on('click touchstart', function() {
resultsDiv.setAttribute('class', 'col-md-9 hidden');
portfolioDiv.setAttribute('class', 'col-md-9 visible');
});
$('#resultsBtn').on('click touchstart', function() {
portfolioDiv.setAttribute('class', 'col-md-9 hidden');
resultsDiv.setAttribute('class', 'col-md-9 visible');
});
});
</script>
Here is my navbar stack, where the two options act as buttons
<div class="col-md-3 col-sm-12 col-xs-12">
<br />
<ul class="nav nav-stacked">
<li style="background-color: lightgreen ; color:black;font-weight:bold">Introduction
</li>
<li style="background-color: lightgreen; color:black;font-weight:bold">Key Achievements
</li>
</ul>
</div>
You are confusing variables that reference elements with jQuery selectors that select by ID. Essentially you can remove the following lines:
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
and then change your jQuery selectors to:
$('#RenderPortfolio_Btn').on('click touchstart', function() {
and
$('#RenderResults_Btn').on('click touchstart', function() {
Your code is missing a comma between click and touchstart
also you id selector is incorrect
$('#RenderPortfolio_Btn').on('click, touchstart', function() {
resultsDiv.setAttribute('class', 'col-md-9 hidden');
portfolioDiv.setAttribute('class', 'col-md-9 visible');
});
Related
Following is my HTML,
<div class="container">
<ul class="navbar">
<li class="nb-link"><a>Home</a></li>
<li class="dropdown">
<a>CBSE</a>
<ul class="dropdown-menu">
<li>10th Standard</li>
<li>12th Standard</li>
</ul>
</li>
<li class="dropdown">
<a>Engineering</a>
<ul class="dropdown-menu">
<li>JEE - Main</li>
<li>JEE - Advanced</li>
</ul>
</li>
</ul>
I have 2 dropdowns . When I click one, it comes down. But when I click another, even that comes down without closing the previous one . This creates an overlap. The way I'm handling this using JS is as follows
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$('.navbar').$this.children('.dropdown-menu').removeClass('open');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').addClass('open');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? Also, the dropdowns should close when anywhere on the page is clicked ?
can try this
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$('.dropdown').not($this).removeClass('active')
$('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
$this.toggleClass('active');
$this.find('.dropdown-menu').toggleClass('open');
});
});
Working Demo
this is a function you can use if selectors is not target
// function for if selectors not target
function actionwindowclick(e , selector , action){
if (!$(selector).is(e.target) // if the target of the click isn't the container...
&& $(selector).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
and you can use it in window click event like this
$(window).on('click', function(e){
actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
$('.dropdown').removeClass('active')
$('.dropdown-menu').removeClass('open');
});
});
Working Demo
Note: I think you may need to
event.stopPropagation()
while you trying to click on .dropdown-menu itself
$('.dropdown-menu').click(function(e) {
e.stopPropagation()
});
Try:
$(document).ready(function() {
$('.dropdown').click(function() {
var $this = $(this);
$this.children('.dropdown-menu').toggleClass('open');
if ($this.children('.dropdown-menu').hasClass('open')) {
$this.removeClass('active');
$this.children('.dropdown-menu').fadeOut("fast");
}
else {
$this.addClass('active');
$this.children('.dropdown-menu').fadeIn("fast");
}
});
});
I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elements but it also closes the div when clicking on inside of the div
<ul>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="google.com">item in dropdown menu with valid url when clicked here div.sub should stay close</a>
</div>
</li>
<li class="menuContainer">
<a class="top" href="#">Menu</a>
<div class="sub">
<a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
</div>
</li>
$(document).ready(function(){
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
$( "#effect" ).hide();
return false;
});
$("li.menuContainer div.sub").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function (){
$("li.menuContainer div.sub").hide();
});
});
what i want to do is to stop closing div when clicked inside of it. Any help please?
I think you are looking for e.stopPropagation();. Use it in an event on the child items.
This will stop the event from propagating to the parent div.
In your code the problem is inside the following function, now corrected:
$('html').click(function(event){
var ele = event.target.tagName + '.' + event.target.className;
if (ele != 'DIV.sub') {
$("li.menuContainer div.sub").hide();
}
});
Like you can see now when you click on whatever html element a check is done to prevent the undesired action.
use this code
$("li.menuContainer > a.top").click(function(e) {
e.preventDefault();
$div = $(this).next("div.sub");
$("li.menuContainer div.sub").not($div).slideUp();
$div.slideDown();
});
instead of
$('li.menuContainer').each(function() {
var $dropdown = $(this);
$("a.top", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.sub", $dropdown);
$div.toggle();
$("li.menuContainer div.sub").not($div).hide();
return false;
});
});
and about
$('html').click(function(){
$("li.menuContainer div.sub").hide();
});
you can use
$(window).on('click',function(e){
if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
&& $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
{
$("li.menuContainer div.sub").slideUp();
}
});
Working Demo
Update:
$("div.sub > a.top").on('click',function(e) {
e.preventDefault(); // prevent page from reloading
e.stopPropagation(); // prevent parent click
alert('Here We Are :)');
});
Working Demo
I am trying to create a navigation system where there is a set of links, that when clicked, will load an external page into a div. This is what I have so far, but it doesn't work:
<div class="row">
<div class="col-md-4"><div class="navActive">Link1</div></div>
<div class="col-md-4"><div class="">Link2</div></div>
<div class="col-md-4"><div class="">Link3</div></div>
</div>
$(document).ready(function() {
$('.loadPage').click(function(e){
e.preventDefault();
var curActive = document.querySelectorAll(".navActive");
for (i=0;i<curActive.length;i++)
curActive[i] = curActive[i].className.replace( /(?:^|\s)navActive(?!\S)/g , '' );
e.preventDefault();
$('.targetLoad')
.hide()
.load(this.href), function() {
$(this).fadeIn(500);
});
$(this + ' div div').addClass('navActive');
});
});
You have a couple of errors in your code:
.load(this.href*)*, function() {...); should be .load(this.href, function() {. You want to specify a complete callback. Not just declare a function expression, right?
this div div what's that? You need $(this).find('div > div').
Summarizing it up.
$(function() {
$('.loadPage').click(function(e){
var activeCls = 'navActive';
e.preventDefault();
$('.' + activeCls).removeClass(activeCls);
$('.targetLoad')
.hide()
.load(this.href, function() {//there is no ')' after href
$(this).fadeIn(500);
});
$(this).find('div > div').addClass(activeCls);
});
});
Working demo http://jsfiddle.net/tarabyte/F4EL9/. Ignore additional code to emulate server response.
Consider doing something like this:
<a onclick="load_url('/my-page.html');">My page</a>
And then the jquery:
function load_url(url)
{
$("#target_div").load(url);
}
I have a jquery function to toggle "ReplyComment" div.
function addcommentdiv() {
$('.in').click(function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
}
addcommentdiv();
$(document).ready(function () {
addcommentdiv();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
addcommentdiv();
});
...
<ul class="chats">
<li class="in" >
blablabla
</li>
<div class="ReplyComment" id="ReplyComment">
blablabla
</div>
</ul>
This function sometimes work sometimes doesn't.Shortly not working smoothly.
I can't understand.(inside updatepanel and datalist)
It's possible that you are adding the click handlers multiple times. To avoid the issue completely, I would recommend using event delegation:
$(document).ready(function() {
$(document).on('click', '.in', function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
});
This will prevent you from needing to rebind the events after every UpdatePanel refresh.
Unfortunately I am having issues with the disappearing of the drop down. I'm currently using toggleClass to add/remove the class on click but I also need this process undone when the menu is blurred ie: clicking anywhere else on the page etc. Here is my jquery code:
$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});
<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾</a>
<ul class="sort-menu toggle-off">
<div class="droid"></div>
<li class="top">Notes</li>
<li>Photos</li>
<li>Videos</li>
<li class="divider"></li>
<li class="btm">Make List</li>
</ul>
</li>
function toggleMenu()
{
$('ul.toggle-off').toggleClass('toggle-on');
}
$(function() {
$('#srt-btn').click(toggleMenu);
$('#srt-btn').blur(toggleMenu);
});
Working example.
you could also use stopPropagation to cancel click events
$(function() {
$('#srt-btn').click(
function(e) {
$('ul.sort-menu').slideToggle();
e.stopPropagation();
}
);
$('.sort-menu li').click(
function(e) {
$('ul.sort-menu').slideUp();
e.stopPropagation();
}
);
$(document).click(
function(){
$('ul.sort-menu').slideUp();
}
);
});
And don't forget about setting your menu options ul to position:absolute else your elements will shift
Here is a jsFiddle
You could try something like this:
var IsInside = false,
$sortMenu = $('#sort'),
$toggleOn = $('.toggle-off');
$sortMenu.on('mouseenter', '#srt-btn', function(){
IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
IsInside = false;
});
$sortMenu.on('click', '#srt-btn', function(){
$toggleOn.toggleClass('toggle-on');
});
$(document).on('click', 'body', function(){
if(!IsInside) {
$toggleOn.removeClass('toggle-on');
}
});
Here a jsFiddle.