Develop Reference

Use an if else function to resize content using javascript

I'm new to the website so I apologize if I'm doing something wrong here.
Alright so here is my problem. I have 3 div next to each others. One of them is a menu, the second is a player and the third a chat box.
The set up is the following. When I open the menu to display the submenu, the player slides out to the right pushing the chat box under the player.
I thought of using javascript to resize the chat box size whenever the menu is triggered.
This is what I have so far :
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").css({"width": "30%"});
});
});
And it works!
The problem is when I close the sub menu and the player slides back to its original position, the chat box does not resize to its original size.
I feel like I need to use the if else function but I can't figure out the code.
Could you help me with the function please?
THIS IS THE WHOLE CODE : https://codepen.io/LAMUUZ/pen/JJrodY

Edit:
You can create a class having width 30%
.tempWidth {
width: 30% !important
}
Then use toggleClass on container and pass in the class.
$(document).ready(function(){
$(".zocial-youtube").click(function(){
$(".container").toggleClass("tempWidth");
});
});
Did you try using toggle instead of click ?

you could use an if else statement and it might not be a bad exercise for you to use. in that case you should set a variable like on the intial click and then change that variable around...
Something like this
var makeDivSmall = true;
$(".zocial-youtube").click(function(){
if(makeDivSmall){
$(".container").css({"width": "30%"});
makeDivSmall = false;
}
else{
$(".container").css({"width": "100%"});
makeDivSmall = true;
}
});
You can also accomplish it with only one if statement like this:
$(document).ready( function(){
$('.zocial-youtube').click( function() {
var toggleWidth = "100%"
if($(".container").css("width") == "100%"){
toggleWidth = "30%"
}
$('.container').animate({ width: toggleWidth });
});
});
Also jquery has a method called toggle which can be convenient for things like this. The basic implementation just toggles an element visible state.
By the way you speak about sliding so maybe you want to put a slide effect when the width changes rather just snapping it to 30% ? have a look here
$( "container" ).animate({
width: "30%"
}, 1500 );

Jquery collapsing menu in wordpress (slight glitch)

So I'm making a website using wordpress: http://www.baxtersresume.com/wordpress-3.9.1/wordpress/about/
I'm playing with the menu jquery to get the right effect and I think I've almost got it but I need a bit of help. If you look at the site you'll notice when you open the bottom submenu by mousing over and then re-enter the menu from the bottom with the pointer it will close. That's what I'm trying to avoid. Here's the script so far:
jQuery(document).ready(function(){
jQuery(".page_item ul, .sub-menu").hide();
var current;
var currentsub;
jQuery(".page_item ul, .sub-menu").prev().mouseenter( function() {
current = jQuery(this);
currentsub = jQuery(this).next();
currentsub.slideDown();
});
/*jQuery(".header__content").mouseleave( function() {
jQuery(".page_item ul, .sub-menu").slideUp();
});*/
jQuery(".menu-item-object-page, .menu-item-has-children").mouseenter( function() {
if (current != jQuery(this) && currentsub != jQuery(this)) {
currentsub.slideUp();
};
});
});
What can I do here?
edit* (Solved! JSfiddle with the html)
http://jsfiddle.net/tu965j0d/1/

Perhaps something like the following would be a starting point for you. Simply using selectors to determine those elements you want to slideUp/slideDown, and exclude children of the target of the mouseEnter event?
$(function () {
$('.sub-menu').hide().parent().mouseenter(function(){
$('.sub-menu').not($(this).find('.sub-menu')).stop(true, true).slideUp();
$(this).find('.sub-menu').slideDown();
});
});
Fiddle: http://jsfiddle.net/tu965j0d/
Edit: There's also a number of accordian menu libraries and tutorials out there, might be useful? For example, this little tutorial using some nice CSS3 transitions.

Jquery accordion not collapsing

So im busy creating a Newsletter archive by using a Jquery accordion for my client. Each month in essence is an accordion (So the month itself is expandable and collapsible) and every article too. My first month (January) is working perfectly but for some reason, none of the others work as expected. The other "months" can expand and collapse but not their articles. I have tried amending the Javascript countless times but to no avail.
Here is the link to the test site:
http://promisedev.co.za/eam/gt/
If anybody has any suggestions or advice it would be greatly appreciated!

i think the problem is with your jquery.akordeon.js file. you can delete this file and use this JQuery code. I edited your code you can use this:
jsFiddle is here
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
$(".togglebox:first").show();
$(".akordeon-item-head").next(".akordeon-item-body").hide();
//slide up and down when click over heading 2
$("h1").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
/* here is the new Codes*/
$(".akordeon-item-head").click(function(){
$(this).next(".akordeon-item-body").slideToggle();
});
});

All you have to do is remove inline styles such as height: 154px and height: 0 and set height in a local/external css:
<style>
.akordeon-item-body { height: 154px; }
</style>

I had to use an accordeon mechanism on some site and finally ended up coding it on my own
Fiddle test case <HERE>
The important part is to store last slided element
$("#commonAncestor").on('click', function (e) {
var $me = $(this),
$clicked = $(e.target).closest('.clickableArea', this),
$lastClicked = $me.data('active') || $([]),
...
});

jQuery to slide a div right to left slides the div out of window

I have created a slider that slides from right to left. I am changing margin-right to make the slide work.
As per the requirement, I have a treeview, when user clicks on any node, it opens a sliding dialog with some controls in it. When user clicks on any node, it should first close the previously open dialog and then open the dialog for currently selected node. I am able to make this work when user clicks on the node, the dialog opens, and when user click back again on the same node or the slider-button, the dialog hides. But somehow, the code to hide when user click on any other node doesn't work properly. It moves the slider-button and the dialog away and I don't see anything.
I used the following code:
if($('#slider-button').css("margin-right") == "400px") {
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
} else{
$(sliderDialog).animate({"margin-right": '+=400'});
$('#slider-button').animate({"margin-right": '+=400'});
}
I thought, it as simple as finding if the previously selected dialog is different than current than just call the same code that hides the dialog when user clicks on the same node again. ie.
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
But, it behaves weird. Anyone, what am I missing here?
Here is my jsFiddle.

Using the DOM and such that you had, I've updated the JS to switch between them after animating back (here is the Fiddle in action):
var sliderDialog = "#dvPriorityDialog"
function slideIt() {
var sliderId = '#' + $('.pollSlider.open').attr('id');
var slideWidth;
if ($('.pollSlider').hasClass('open')) {
slideWidth = $('.pollSlider.open').width();
$('.pollSlider.open').animate({"margin-right": '-=' + slideWidth}, function() {
if (sliderId != sliderDialog) {
slideIt();
}
});
$('#slider-button').animate({"margin-right": '-=' + slideWidth});
$('.pollSlider.open').removeClass('open');
} else {
slideWidth = $(sliderDialog).width();
$(sliderDialog).addClass('open');
$('#slider-button').animate({"margin-right": '+=' + slideWidth});
$(sliderDialog).animate({"margin-right": '+=' + slideWidth});
}
}
function bindControls() {
$('#slider-button').click(function() {
slideIt();
});
$("#liPriority").click(function() {
sliderDialog = "#dvPriorityDialog";
slideIt();
});
$("#liFasting").click(function() {
sliderDialog = "#dvFastingDialog";
slideIt();
});
}
// init;
$(document).ready(function() {
bindControls();
});

Try
$(sliderDialog).stop().animate({"margin-right": '-=400'});
$('#slider-button').stop().animate({"margin-right": '-=400'});

You have multiple problems :
You try to move a same element (#slider-button) in function of two different animations (a panel go left and an other go right). To resolve that, the best option is to add a button to each panel. It will be a lot easier to manage global behavior because you have only one animation by panel.
You don't stop animation when you want to change them. Store your animation in vars and use .stop() function with the first param to true in you case (.stop(true) to stop animation and remove it from queue without finish it).
Your state test is based on your animated css attribute (margin-right). So you alltime have to wait the end of animation to start the new one. To fix that use vars to store your animations state : (var firstPanelLastMove = 'left' // or right ... etc).

Scroll the div till the last div on mousedown

Another question on iScroll 4. I have set up a demo in JSFiddle.
I want to scroll the div on mousedown. It should scroll to the end:
continuously;
without any interruption;
with static speed;
Until it reaches the last div, or I do a mouseup in the middle.
Is it possible to achieve this?

Check this fiddle: http://jsfiddle.net/z2YWZ/2/
There is still one problem. It doesn't stop when it reaches the end. iScroll uses CSS translate to do the scrolling and I couldn't find a way to get the current translation form it. Currently looking for a solution for that.
UPDATE
iScroll has a useTransform option, using which we can ask it not use translate and instead use CSS left property for scrolling. This way we'll be easily able to identify whether its the end has been reached (either way). To use, simply set useTransform: false while initing iScroll.
UPDATE 2
Check this fiddle: http://jsfiddle.net/z2YWZ/12/

Can you check this solution:
http://jsfiddle.net/ugeU3/3
html:
<div id="click">Element to click on</div>
js:
jQuery("#click").bind('mousedown', function(){
intInterval=setInterval(function(){
myScroll.scrollTo(25, 0, 800, true);
},30);
});
jQuery("#click").bind('mouseup', function(){
intInterval=window.clearInterval(intInterval);
});
you can change the time values to achieve your speed-preferences.
i hope it helps.

I have modified #techfoobar code and done something like this which both scrolls continously till end on mousedown and moves one div in or out on single click. The code snippet is :
var scrolling=false;
var scrollTimer=-1;
$('#next').bind('mousedown',function () {
scrolling = true;
scrollTimer = setInterval(function () {
scrollDivRight();
}, 100);
return false;
});
$('#next').bind('mouseup',function () {
scrolling = false;
clearInterval(scrollTimer);
return false;
});
$('#next').bind('mouseout',function () { /*For smoother effect and also prevent if any previous delay (eg. 100ms)*/
scrolling = false;
clearInterval(scrollTimer);
return false;
});
scrollDivRight:function(){
if(!scrolling) return false;
myScroll.scrollTo(177, 0, 400, true);
}
Please suggest if there is anything better then this. Ofcourse the issue mentioned by #techfoobar in his answer still remains unsolved.