JQuery Slide Event and Div Height not changing as expected - javascript

I am working with JQuery and I'm trying to change the html of a div box when the child div slides in and out. My problem is that the code below isn't changing the html value of #menu_text. It only displays Hide Menu and is not detecting the real height as changed by slideToggle.
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
console.log('Debug : %s', $('#menu_links').height());
if ($('#menu_links').height() == 1)
$('#menu_text').html("Show Menu");
else if ($('#menu_links').height() == 20)
$('#menu_text').html("Hide Menu");
});
});
Upon inspection in firebug console, The value of height never changes from 20 unless you click the div really fast multiple times then it will change to 1. (I should add that the height defined in the style sheet is 20)
The doc says that slideToggle only affects the height of the object. Am I missing something? Thank you for the help.
<div id="menu"><p id="menu_text">Show Menu</p>
<div id="menu_links">
Stuff
</div>
</div>

Try:
$('#menu').click(function(){
$('#menu_links').slideToggle('slow', function(){
$('#menu_text').html($('#menu_links:visible').length ? "Hide menu" : "Show menu");
});
});
There you'll set the text of the menu depending on if the links element is visible or not. You're probably better off not depending on element's heights and widths, as in the worst case they might vary from browser to browser (and in this case, they'll also change according to the content of the links element).

You could also use data() to save your state. It's a great trick to save state or anything
$('#menu').click(function () {
$('#menu_links').slideToggle('slow', function(){
var $this = $(this);
var toggled = $this.data('toggled');
if (toggled)
$('#menu_text').html("Show Menu");
else
$('#menu_text').html("Hide Menu");
$this.data('toggled', !toggled)
});
});

Related

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 );

how to detect scrollbar on application?

I have an SAPUI5 app where I display a table which goes off the screen. I have a button that I the user can click to go back to the top. The problem is that button is always displayed, even when not needed. I only want it to show up when the table goes off the screen. I've been looking for solution to this but nothing has worked so far.
Here is my button defined in my xml view
<html: a id="toTop" href ="#_xmlview0--top">
<Button id="backToTopBtn" text = "back"/>
</html:a>
and then I have this defined at the top of my view
<html:div id = top"></html:div>
I've tried different solutions I found using jquery but nothing has worked so far. I thought something like this would work
if($('body').height()>$(window).height()){
//go back to top here
}
but looking at these values body height and window height are the same. Any ideas?
To not have your button show all the time you need to hide it using styles or javascript. I'll assume you'll use display: none in this case then show it when the user has scrolled a certain amount.
element.scrollTop and element.scrollLeft give you the amount of offset an element has.
If you want to show something only when the body has been scrolled a certain amount you could do:
var page = document.body;
var button = document.getElementById('backToTopBtn');
function showScrollTopButton() {
if (page.scrollTop > xyz) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
return;
}
window.addEventListener('scroll', showScrollTopButton);
Where xyz is the numerical value for when to show and hide the button.

removing the height attribute when binding to resize

I have done a navigation which goes the full document when mobile view which is done using jquery.
I am trying to cancel the height to be back to auto or just remove the style attribute which was given from the previous jquery.
But for some reason it does not work, I have tried a few things but it simply does not work.
Can you not cancel the style attribute if it is given through jquery?
Here is navigation which opens and closes the navigation in mobile view:
// Mobile Navigation Area
jQuery('.menu-icon-mobile').on('click',function(event){
event.preventDefault();
var currentId = jQuery(this).attr('id');
var mobileHeight = jQuery(document).height();
switch (currentId){
case 'mobile-nav-open':{
jQuery('.navigation').animate({height: mobileHeight + "px"}, 400 );
jQuery(this).attr('id','mobile-nav-close');
}
break;
case 'mobile-nav-close':{
jQuery('.navigation').animate({height: "0px"}, 400 );
jQuery(this).attr('id','mobile-nav-open');
}
break;
}
});
Here is the resize code, ive added the alert to show that its binded and it is :(
//checking if the screen is resized and if it is and the screen is less that 768px wide then cancel the attributes
jQuery(window).resize(function(){
var thescreen = jQuery(window).width();
if(thescreen > 768){
jQuery('.navigaiton').removeAttr('style');
}
alert(thescreen);
});
For what I can see this should work, the only thing I can think of is that the style attribute is not there in real life as its done using jquery so it cant see the style attribute to remove it.
Any idea how to remove the attribute once given?
Here is the jsfiddle link:
http://jsfiddle.net/robertg/kn1scc2f/2/
Thanks
You misspelled your selector.
Change:
jQuery('.navigaiton')
To:
jQuery('.navigation')
You can remove any css attribute completely from the markup using the code below
$('your-selector').css('height', '');
Updated fiddle - http://jsfiddle.net/Aerious/6h30eL8q/

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).

Scrollable DIV scrolls to top when TD is clicked

I have an interesting problem that I cannot seem to find an answer for on Google. I have a scrollable div that a simple table in it. There are 'heading' rows ('.sl-bucket') that when clicked the script shows the associated rows below that, hiding other shown rows. In Chrome and IE, there is no issues. In Firefox on a fresh load, when you click the first element, it scrolls the div back to the top. Everything else works great after that.
Any thoughts on how I could fix this?
Here is the example jsFiddle.
Here is my javscript:
$(window).on('click', '.sl-bucket', function() {
var bucket = $(this).attr('rel');
if ($('.sl-'+bucket).is(':visible') == false) {
$('.sl-unitRow:visible').hide();
$('.sl-'+bucket).show();
} else {
$('.sl-'+bucket).hide();
}
return false;
});
Working for me by using
$('.sl-'+bucket).css("display", "block");
instead of
$('.sl-'+bucket).show();

Categories

Resources