I have the following codes to create a top sliding admin panel, that will appear from the very top of the page. This sliding panel will be activated but clicking on the button "#tp-button2".
However, I would like to add one more sliding panel and call it #toppanel2.
Behavior
tp-button2: when click, it will either show or hide toppanel, and if toppanel2 is "show", to slide it back into position before it slides out toppanel
tp-button3: same behavior as above but for toppanel2
Current Situation: I'm using toggleClass which is easy for just 1 panel since it's to turn and off, but I'm not sure the algorithem to achieve the above, and i've tried long methods including addClass and removeClass and it's not working out because removeClass doesn't work.
This is what i'm using for single toggleClass
Original CSS
#tp-button2,tp-button3 {
}
.toppanel {
height: 150px ;
top:-150px;
background-color: #FFFFFF !important;
position: '.$dimensionposition.' !important;
}
.toppanel2 {
height: 75px ;
top:-75px;
background-color: #F1F1F1 !important;
position: absolute !important;
}
.show {top:0px}
.tp-relative {position: relative;padding-bottom: 150px;}
.tp-relative2 {position: relative;padding-bottom: 75px;}
</style>
Original Javascript
var $j = jQuery.noConflict();
$j(function() {
$j( "#tp-button" ).click(function(){
$j(".toppanel").toggleClass("show", 900, "easeOutBounce");
$j("#tp-relativeblock").toggleClass("tp-relative", 900, "easeOutBounce");
});
});
</script>
I've attempted something like this
var $j = jQuery.noConflict();
$j(function() {
$j("body").on("click", "#tp-button2", function(){
if ($j("#toppanel").hasClass("show")) {
alert("tp-button2 remove class");
$j("#toppanel").removeClass("show", 900);
$j("#tp-relativeblock").removeClass("tp-relative", 900);
} else {
alert("tp-button2 addClass");
$j("#toppanel2").removeClass("show", 900).delay(900).queue($j("#tp-relativeblock").addClass("tp-relative", 900));
$j("#tp-relativeblock").removeClass("tp-relative2", 900).delay(900).queue($j("#toppanel").addClass("show", 900));
}
});
$j("body").on("click", "#tp-button3", function(){
if ($j("#toppanel2").hasClass("show")) {
alert("tp-button3 removeClass");
$j("#toppanel2").removeClass("show", 900);
$j("#tp-relativeblock").removeClass("tp-relative2", 900);
} else {
// Here i attempt to just bring down panel 2 without closing panel 1 to see whether there's code above that's wrong but it's not working too.
alert("tp-button3 addClass");
$j("#tp-relativeblock").addClass("tp-relative2", 900);
$j("#toppanel2").addClass("show", 900)
}
});
This is what i have on body
<div id="tp-button"><i class="'.$iconstop.'"></i></div>
<div id="toppanel" class="toppanel">
<div id="tp-container">
<div class="tp-s1">
THIS IS PANEL 1 COLUMN 1
</div>
<div class="tp-s2">
THIS IS PANEL 1 COLUMN 2
</div>
<div class="tp-s3">
THIS IS PANEL 1 COLUMN 3
</div>
<div class="tp-s4">
THIS IS PANEL 1 COLUMN 3
</div>
</div>
</div>
<div id="toppanel2" class="toppanel2">
<div id="tp-container">
<div class="tp-s1">
PANEL 2
</div>
<div class="tp-s2">
PANEL 2
</div>
<div class="tp-s3">
PANEL 2
</div>
<div class="tp-s4">
PANEL 2
</div>
</div>
</div>
<div id="tp-relativeblock"></div>
I understand addClass and removeClass and what it does but sometimes removeClass doesn't remove tp-relative from tp-relativeblock so it doesn't move back up to space.
Click Button2:
toppanel slide down Success
relativeblock slidedown Success
Second Button 2 Click:
toppanel slides up to 0px Success
remove tp-relative from #tp-relativeblock failed
Click button3:
Nothing Happens
Button2 also became disabled
Amature here to javascript and jquery, so will appreciate all help i can to achieve this.
My objective is for panel 1 to show "Login TO Website" and panel 2 to show "Register To Website"
THANK YOU IN ADVANCED!!
This is the jQuery I use to add and remove classes
To add:
$("#some-id").toggleClass('class-name', 'add');
To Remove:
$("#some-id").toggleClass('class-name', 'remove');
In this fiddle toggleClass is used to trigger css animations
Related
I have 3 nav buttons that, when hovered over, open a menu underneath. I want to add a timer when then mouse leaves the button so it doesn't close right away after opening. It bugs out a bit then. This is my starter code in jquery, for opening the drop-menu
$('.info').hover(function () {
$('.d-skills').show(500);
$('.d-info').hide(500);
$('.d-exp').hide(500);
});
If I add this code in it breaks and nothing works
function(){ t = setTimeout(function(){$('.d-info').hide(500)}, 500;)
}
Also, i add
var t;
on the very beggining, and i separate the functions with a ','.
'd-info' is the class for the drop menu, and 'info' is the button class
You can use handlerOut function for hover.
Below is a simple snippet that demonstrates this and hides the sections after a 1.5 second delay.
$('.info').hover(function () {
$('.d-sections').show(500);
}, function() {
setTimeout(function() {
$('.d-sections').hide(500);
}, 1500);
});
.d-sections {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
Hover here for more Information!
<div class="d-sections">
<div class="d-skills">
The D Skills section!
</div>
<div class="d-info">
The D Info section!
</div>
<div class="d-exp">
The D Exp section!
</div>
</div>
</div>
https://jsfiddle.net/32bekom9/1/
I'm developing an wordpress theme and I'm using Isotope or Masonry for the masonry layout. Also I'm using Visual Composer to insert custom elements that i mapped to Visual Composer. I have a container which has no styles and all these items have a div with a class "overlay" that's absolutely positioned and has 100% width and height. It's purpose is to position the white box ( class "content" ) inside of it. Isotope has been giving me a hard time in a previous wordpress theme.. I have no idea why. Here's the image.
Here's the markup for an item:
<div class="masonry-item">
<img/>
<div class="overlay">
<div class="content">
<!-- Just some text here
</div>
</div>
</div>
ANY suggestions are more than welcome, because I can't seem to get it to work in ANY way. Most of the layout methods just end up overlapping all of the items in the most top left corner of the container. Yes, I've tried using ImagesLoaded.js, and it hasn't made a difference.
Masonry JS:
$(".masonry-grid").isotope({
itemSelector: '.masonry-item'
});
.masonry-item CSS:
.masonry-item {
position: relative;
margin-bottom: 30px;
}
It would seem that if they ALL have equal width like 50% it will work flawlessly. Like Deepak Thomas noted in the comments. But as soon as i put a random style for each element, like 30, 40, 50, 60, 70% width it starts to break. In some cases it would put elements next to each other, most of the time leaving a gap between them if they are not in the first row, and the other times it would just stack them one on top of another even though the two items can clearly be put side to side and still have room to spare.
EDIT: Tried removing the image. No difference.
Thanks in advance!
try this :
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
$post_masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
}
});
Recommended to use imagesloaded.pkgd.min.js to apply isotope when images already loaded.
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
var $masonry = $post_masonry.imagesLoaded(function() {
$masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
});
}
});
if ($post_masonry.length) --> is optional. Usually applied with dynamic ajax.
From the code you shared, it seems masonry does not provide default sizes to its items.
For every masonry-item, give an additional class
E.g:
.half { width: 50% }
.full { width: 100% }
.pad { padding: 15px }
And use this on the items as you find them apt.
E.g:
<div class="masonry-item half">
<div class="pad">
<img src="xyz" />
<div class="overlay">
<div class="content">I'm the overlay content</div>
</div>
</div>
</div>
That should solve it.
The problem is that the first masonry item is being taken as the columnWidth option for isotope. So just make sure that the first time is the smallest one of your columns.
Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.
I try to fullfill the following requirements:
There should be a Newsblock within a HTML Page with a fixed width and
height.
In this Newsblock only the title of the news are visible.
Those news are "collapsed" by default and should "expand" if the Mouse is over it.
Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
Newstitle and Newstext should never leave the Newsblock.
so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.
P.s.: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S
HTML
<div id="newsblock">
<div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
<div class="newsentry">
<div class="newstitle">...</div>
<div class="newstext">...</div>
</div>
... another 9 'newsentry' divs.
</div>
</div>
JS
$(".newsentry").hover(
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
CSS
.newsblock {
height: 200px;
overflow-y: auto;
}
Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock.
The scrollbar being part of #newsblock, the entry isn't closed anymore when you go on it.
EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.
Here is a working example:
var $newsblock = $("#newsblock");
function closeAllNews(slideUpArgs){
return $(".newstext").stop(true).slideUp(slideUpArgs);
}
function openNews(news, slideDownArgs){
$(news).find(".newstext").stop(true).slideDown(slideDownArgs);
}
function ensureNewsTopVisible(news){
// Check if the top of the newsentry is visible...
var top = $(news).position().top;
if(top < 0){
// ...and if not, scroll newsblock accordingly.
$newsblock.scrollTop($newsblock.scrollTop() + top);
}
}
$(".newsentry").each(function(){
var $this = $(this);
// When the mouse enter a news entry...
$this.on("mouseenter", function(){
// ...close all opened entries (normally there is at most one)...
closeAllNews({
// (while making sure that the top of this entry remains visible
// at each step)
step: ensureNewsTopVisible.bind(null, $this)
});
// ...open this newsentry.
openNews($this);
});
});
// When the mouse get out of the newsblock, close all news.
$newsblock.on("mouseleave", closeAllNews);
.newstitle {
font-size: 2em;
}
.newstext {
display: none;
}
#newsblock {
max-height: 150px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newsblock">
<div>
<div class="newsentry">
<div class="newstitle">News 1</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 2</div>
<div class="newstext"></div>
</div>
<div class="newsentry">
<div class="newstitle">News 3</div>
<div class="newstext"></div>
</div>
<!-- Etc. -->
</div>
</div>
<!-- Ignore the script below. It is just filling in the news' text. -->
<script>
$(".newstext").each(function(i, newstext){
$.get("http://baconipsum.com/api/?type=meat-and-filler&format=html¶s=5&num=" + i)
.then(function(ipsumHtml){
$(newstext).html(ipsumHtml);
});
});
</script>
Try this:
$(".newsentry, .newsblock").hover( // <-- changed
function() {
$(this).children(".newstext").stop(true,true).slideDown();
},
function() {
$(this).children(".newstext").stop(true,true).slideUp();
}
);
This makes sure the block stays open when you hover either over the header or the block itself.
Is that what you mean?
There would be a joke , if i am wrong .. what i thing just change your css as
/* not .newsblock **/
#newsblock {
height: 200px;
overflow-y: scroll;/* not auto*/
}
It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.
$(".newsentry").click(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
}
);
Or use the below one to go with hover.
$(".newsentry").hover(
function() {
$(".newstext").stop(true,true).slideUp();
$(this).children(".newstext").stop(true,true).slideDown();
},
function(){}
);
This will not close the news text block until you accidentally hover over another news entry.
I am trying to make a simple page with a few divs, where if you click on one div it moves to the center and getting bigger (other divs still visible in the background). When you click on another div visible in the background the div in the center goes back to where it was before and clicked div goes to the center and resizing. Also if you click on the div in the center it should go back to where it was before.
I made a Jquery script for it but it doesnt work properly - clicking on any div first time works fine but any following clicking just stops working.
Here is an html with some styling:
<style>
#outside1 {background-color:gray;} #outside2 {background-color:blue;} #outside3 {background-color:brown;}
#inside1 {background-color:red;} #inside2 {background-color:green;}
#inside3 {background-color:pink;} #inside4 {background-color:yellow;}
#inside5 {background-color:gold;} #inside6 {background-color:silver;}
.outside {width:100px; height:90px; margin:5px; } .inside {display:none; margin:2px; }
#test1 {height:400px; }
</style>
<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/> </div>
<div id='inside2' class='inside'> div inside 2 <br/> </div>
</div>
<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/> </div>
<div id='inside4' class='inside'> div inside 4 <br/> </div>
</div>
<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/> </div>
<div id='inside6' class='inside'> div inside 4 <br/> </div>
</div>
</div>
And thats some js and jquery:
kd_small={top: 0, left: 0, opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50, opacity: 1, width:200, height:150 };
var t=0;
function hextend(d){
d.animate(kd_big); d.find('div').show(); $('.outside').off();
var sbs=$(d).siblings(); $(sbs).off(); sbs.append('i am siblings');
d.append('I AM CLICKED'); hshrink($(sbs));
d.on('click', function (){ hshrink($(d)); });
$(sbs).on('click', function (){ hextend($(sbs)); });
}
function hshrink(s){
s.find('div').hide(); s.animate(kd_small);
}
$('.outside').on('click', function(){
hextend($(this) );
});
$('.inside').on('click', function(e){
e.stopPropagation(); $(this).html('inside div clicked' + t +'times');
t++;
});
Thanks
Instead of using .on('click' use delegate('click' or `.live('click', as you are appending divs.
However, both .live and .delegate have been superseded, so I imagine this would be a 'quick fix'.
Looking again at the code, I think you may have to use 'addClass' to add the correct class to the div's you are appending, and use the console to check the elements once they are centered and make sure the classes exist for the elements.
I have this jQuery code:
$("#people td, #list td").hover(function() {
$(this).stop().animate({
backgroundColor: "#444"
}, "fast");
$(this).find(".controls").stop().fadeIn("fast");
}, function() {
$(this).stop().animate({
backgroundColor: "#333"
}, "fast");
$(this).find(".controls").stop().fadeOut("fast");
});
$("#list .controls").hide();
.controls is a div, which contains some links to work with entry (there are for example 10 entries on the page). Everything worked until this moment and now it's not working anymore.
When I open the page, .controls hide - that's ok.
But when I hover over the td, css animation runs, but fadeIn does not. Same goes with the fadeOut in the second function (when mouseleave event is triggered).
HTML is as following:
<td>
<div class="icons">
</div>
<div class="profile">
<div class="info">
<div class="name">
</div>
</div>
<div class="controls">
Link
Link
</div>
<div class="clear"></div>
</div>
</td>
That's weird. I removed the .stop() after both .find(".controls") and now it's working.
Little problem is, when you hover in and out couple times the animation then runs a few more times.