Use an if else function to resize content using javascript - 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 );

Related

Diagram: Div hover then Displays Image

ANSWERED: Updated Fiddle
I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window.
I then have 5 div boxes in a fixed position all around the window.
What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
EDITED: What I am trying to achieve is: the original Diagram will be visible, until the mouse hovers over a div box of written content to which will replace the original Diagram with a new Diagram in the exact same position as the original Diagram in the 350x350px square.
Then once the mouse has left that Div box of written content the original Diagram is shown.
Would I just need to create an if statement reverting the display proptery back to none?
I have created this FIDDLE for a basic skeleton.
I thought I was on the right track using the jquery below, but I can not seem to get it to work?
Any input would be greatly appreciated.
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
$diagram1.css(['display':'block']);
});
$('.content-2').hover(function(){
$diagram2.css(['display':'block']);
});
$('.content-3').hover(function(){
$diagram3.css(['display':'block']);
});
$('.content-4').hover(function(){
$diagram4.css(['display':'block']);
});
$('.content-5').hover(function(){
$diagram5.css(['display':'block']);
});
});
JS
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5'),
$image=$('.image_container img');
$('.content-1').mouseover(function(){
$diagram1.css('display','block');
}).mouseout(function() {
$diagram1.css('display','none');
});
$('.content-2').mouseover(function(){
$diagram2.css('display','block');
}).mouseout(function() {
$diagram2.css('display','none');
});
$('.content-3').mouseover(function(){
$diagram3.css('display','block');
}).mouseout(function() {
$diagram3.css('display','none');
});
$('.content-4').mouseover(function(){
$diagram4.css('display','block');
}).mouseout(function() {
$diagram4.css('display','none');
});
$('.content-5').mouseover(function(){
$diagram5.css('display','block');
}).mouseout(function() {
$diagram5.css('display','none');
});
});
The .css() api syntax was wrong it should be .css('display','block'); and not .css(['display':'block']);
You could use mouseover and mouseenter to have easy way of fullfilling your task instead of hover
JSFiddle-DEMO
you need to make other images invisible when you are hovering over a certain div. image 1, 2, 3, 4, 5. all are overlapping each other. if you take your mouse over image 2 then you need to make image 1,3,4,5 invisible. you can add the visibility: hidden in the jquery you made.
$('.content-1').hover(function(){
$diagram5.css(['display':'block']);
//get visibility code here
});
Hope this answers your question
First you have to change the css syntax then you have to hide all the other images before showing the correct one.
$(document).ready(function(){
var $diagram1 = $('.p1'),
$diagram2 = $('.p2'),
$diagram3 = $('.p3'),
$diagram4 = $('.p4'),
$diagram5 = $('.p5');
$('.content-1').hover(function(){
hide();
$diagram1.css('display','block');
});
$('.content-2').hover(function(){
hide();
$diagram2.css('display','block');
});
$('.content-3').hover(function(){
hide();
$diagram3.css('display','block');
});
$('.content-4').hover(function(){
hide();
$diagram4.css('display','block');
});
$('.content-5').hover(function(){
hide();
$diagram5.css('display','block');
});
function hide()
{
$(".p1,.p2,.p3,.p4,.p5").css("display","none");
}
});
DEMO
on
$diagram5.css(['display':'block']);
maybe it should be like this
$diagram5.css('display','block');
answered fiddle: http://jsfiddle.net/aswzen/4o6mn3pm/6/
and then to make it reversible you have to put the original state display on each block again, like a lamp switches. But if you do this using the display property, probably you're doing it wrong.
Full working filddle as you wish: http://jsfiddle.net/aswzen/4o6mn3pm/11/
but not recommended
The Change display to block using jquery has some problem.
Simply change
$diagram1.css(['display':'block']);
to
$diagram1.css("display", "block");
/**Working fiddle**/
Working fiddle here
To Set a CSS Property
$("p").css("background-color", "yellow");
To Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Detail
replace [] to {} like
$('.content-5').hover(function(){
$diagram5.css({'display':'block'});
});

Create an autoscroll slider

I've found this accordion slider which fits my needs, see demo, but it doesn't start sliding automatically.
$(document).ready(function(){
activePanel = $("#accordion div.panel:first");
$(activePanel).addClass('active');
$("#accordion").delegate('.panel', 'click', function(e){
if( ! $(this).is('.active') ){
$(activePanel).animate({width: "44px"}, 300);
$(this).animate({width: "848px"}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});
and here's all the code on jsfiddle if it helps (although even after changing the widths it's not displaying right): http://jsfiddle.net/wamcbrf3/
I've tried adding this which hasn't helped:
autoPlay: {
enabled: true,
delay: 1500
}
I'm a jquery newbie so any pointers would be much appreciated, thanks
I have fixed some missing HTML and the widths so I could see the slider correctly in my screen (reduced all widths by 400px). Still there were a couple of things missing from the fiddle:
You didn't include jQuery.
There was only one panel, so no possible sliding.
After fixing these 2 things, the slider is working fine (you can see it here: http://jsfiddle.net/wamcbrf3/1/)
For the autoplay, I have created a small function:
function animatePanels() {
// select the next active panel
nextPanel = $("#accordion div.panel.active").next();
// if the length is 0: we were at the last panel, so select the first one instead
if (nextPanel.length == 0) { nextPanel = $("#accordion div.panel:first"); }
// click on the panel to trigger the animation
$(nextPanel).click();
}
Then, you just need to call the function at the end $(document).ready(...) with a setInterval to have the animation start automatically (change 2500 for the time that you want in milliseconds):
setInterval("animatePanels()", 2500);
You can see a running example on this jsfiddle: http://jsfiddle.net/wamcbrf3/4/

javascript/jquery identifying hidden images using dom

$(function(){
var image = $('img');
if (image.attr("id") == "webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
});
I'm trying to write a conditional to find whether or not a hidden image is visible or not. Basically when you hover over the images, if a certain image is visible the hover image will be specific to that visible image. This would be fine if they were constantly visible but since they're on a cycle (cycle plugin) fading in and out every 10 secs I can't identify them. Any ideas?
Sounds like you have duplicate ids!!!! anyway it will be more logical if you write this block of code like this:
$("img").each(function(){
currentImage=$(this).attr("class");
if(currentImage=="webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
$("img").each(function(){
if($(this).is(':visible')){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
Use visible selector

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.

Categories

Resources