Develop Reference

jquery display none not working

Gurus, I am using Jquery to hide or display the fields based on the field value options. Previously I used hide and show function and it was working fine, but there is white space. So I changed to use jquery display none to hide the fields. however it doesn't work, please help, thank you! Below is my code.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]').style.display = "none";
jQuery('[id$=CallSupportBeforeQuestionLabel]').style.display = "none";
}
}

Here is the solution:
jQuery('#CallSupportBeforeOutput').css("display", "none");
jQuery('#CallSupportBeforeQuestionLabel').css("display", "none");

jQuery('[id$=CallSupportBeforeOutput]') return an array you need to provide index to change the style of elements. See below snippet.
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]')[0].style.display = "none";
jQuery('[id$=CallSupportBeforeQuestionLabel]')[0].style.display = "none";}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: red"> visible content
<div id="CallSupportBeforeOutput">main content
</div>
<div id="CallSupportBeforeQuestionLabel">second content
</div>
</div>
Also you are mixing pure javascript with jquery by using style.display. You can use .css() jquery method to change the style if you don't want to provide index of elements.

<script type="text/javascript">
jQuery(document).ready(
function(){
hideRating('initial');
}
);
function hideRating(scope){
if(scope=='initial'){
jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}
}
</script>
can you please try this!!

Both hide() function and style.display = 'none'; are same functionality. You have to check the CSS property. May be it will overwrite.

Use .css property instead of .style property as follows:-
jQuery('[id$=CallSupportBeforeOutput]').css("display", "none");
jQuery('[id$=CallSupportBeforeQuestionLabel]').css("display", "none");}

How do I apply jQuery's slideToggle() to $(this) and do the opposite to all other elements?

What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.

Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)

Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo

I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo

hide one div when another is showing in jQuery?

I am trying to hide a div when another one is visible.
I have div 1 and div 2.
If div 2 is showing then div 1 should hide and if div 2 is not showing then div 1 should be visible/unhide.
The function would need to be function/document ready upon page load.
I've tried this but I'm not having any luck, can someone please show me how I can do this.
<script>
window.onLoad(function () {
if ($('.div2').is(":visible")) {
$(".div1").fadeOut(fast);
} else if ($('.div2').is(":hidden")) {
$('.div1').fadeIn(fast);
}
});
</script>

Add a class of hidden to each div, then toggle between that class using jQuery. By the way, window.onload is not a function, it expects a string like window.onload = function() {}. Also, put fast in quotations. I don't know if that's required, but that's how jQuery says to do it.
<div class="div1"></div>
<div class="div2 hidden"></div>
.hidden { display: none }
$(document).ready(function() {
if($(".div1").hasClass("hidden")) {
$(".div2").fadeIn("fast");
}
else if($(".div2").hasClass("hidden")) {
$(".div1").fadeIn("fast");
}
});

You should pass a string to the .fadeIn() and .fadeOut() methods.
Instead of .fadeIn(fast) it'll be .fadeIn("fast"). Same for .fadeOut().
And in general since you're already using jQuery it's better to wrap your code like this:
$(function () {
// Code goes here
});

It looks like you're using jquery selectors (a javascript library). If you're going to use jquery make sure the library is loaded properly by including it in the document header (google makes this easy by hosting it for you <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>)
With jQuery loaded you can do it like this
$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}
else if ($('.div2').is(":visible")) {
$('div1').hide();
}
});
WORKING EXAMPLE: http://jsfiddle.net/HVDHC/ - just change display:none from div 2 to div 1 and click 'run' to see it alternate.

You can use setTimeout or setInterval to track if these divs exists
$(function() {
var interval = window.setInterval(function() {
if($('#div2').hasClass('showing')) {
$('#div1').fadeOut('fast');
}
if($('#div2').hasClass('hidden')) {
$('#div1').fadeIn('fast');
}
}, 100);
// when some time u don't want to track it
// window.clearInterval(interval)
})
for better performance
var div1 = $('#div1')
, div2 = $('#div2')
var interval ....
// same as pre code

How write this in javascript

I have problems for insert dynamic id into function of JavaScript the code:
$('#scroll-up1, #scroll-down1').bind({ ..............
In this example I need the function to take values of id I send across the function
$('#scroll-up+id, #scroll-down+id').bind({ ..............
The problem it´s the quotes as " or ' no works for me and I can´t use right for function works fine , this script let me scroll text ok but only problem with this because no let me send values right from id of function.
EDIT FOR ME FOR PUT ALL CODE : .....
PHP AND HTML CODE
<?php
$fil_comments=file("comments.txt");
for ($i=0;$i<sizeof($fil_comments);$i++)
{
$line=explode("~",$fil_comments[$i]);
if ($i%2==0)
{
$back=1;
}
else
{
$back=2;
}
?>
<li>
<div id="web_comment_<?php echo $back?>">
<div id="web_comment_name"><?php echo $line[0];?></div>
<div class="web_comment_texto" id="scroll<?php echo $i;?>"><?php echo $line[1];?></div>
<div class="web_comment_arrow" style="margin-left:260px;" id="scroll-down<?php echo $i;?>"><img src="imagenes/comments/arrow_up.png"></div>
<div class="web_comment_arrow" style="margin-left:288px;" id="scroll-up<?php echo $i;?>"><img src="imagenes/comments/arrow_down.png"></div>
</div>
</li>
<script>
scroll_diver(<?php echo $i;?>);
</script>
<?
}
?>
FUNCTION OF JAVASCRIPT CODE
<script type="text/javascript">
function scroll_diver(id)
{
$(function() {
var ele = $('#scroll'+id);
var speed = 30, scroll = 5, scrolling;
$('#scroll-up'+id).mouseenter(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down'+id).mouseenter(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
//var a='#scroll-up'+id;
//var b='#scroll-down'+id;
var a='#scroll-up'+id;
var b='#scroll-down'+id;
//$('a,b').bind({
//$('#scroll-up1, #scroll-down1').bind({
//$('#scroll-up'+id+',#scroll-down'+id)
/// THE PROBLEM HERE !!!
$('#scroll-up'+id+', #scroll-down '+id).bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
}
</script>
Basically the problem it´s in the line of JavaScript function for send id, if you see the PHP code, I use bucle for for create scrolling tips with informations and in each I can scroll his content, for this I call function into the bucle with:
<script>
scroll_diver(<?php echo $i;?>);
</script>
But in this line no send right information for works ok, if I use out bucle for one specific id, works ok , with this works yes but scroll up and down crazy fast , and the controls no works fine.

Then you need to look at something like this:
$('#scroll-up' + id + ', #scroll-down' + id).bind({ ..............
As a commentor mentioned, jQuery selectors are simply strings. You can put them together as you see fit. In this case, I'm concatenating the id (which for simplest examples, I'm assuming is a number or other unique identifier) to the #scroll-up selector, so if your id was "1", you would end up with a string, effectively, that looks like:
'#scroll-up1, #scroll-down1'
after the string concatenation occurs.
Also, it might be worth noting that you'd probably get better bang for your buck if you simply gave both objects the same class, then inside your binding function, work out which item called and perform your scrolling appropriately.
So, if you had:
<div class="container">
<div id="scroll-up1" class="scroller"><!-- and code --></div>
<div id="scroll-down1" class="scroller"><!-- and code --></div>
</div>
then your javascript could look like this, avoiding the need for concatenation:
$('.container').on("mouseover",'.scroller', function(){
var thisId = $(this).attr("id");
if(thisId == "scroll-up1"){
// do your up-scroll
} else if(thisId == "scroll-down1") {
// do your down-scroll
}
});
Mind you, that uses .on(), which is preferred over .bind(), but the idea is to handle it based on a common class, rather than having to modify your selector every time you go to bind your event handler for those items.

Recommended solution: use CLASS NAMES for COMMON FEATURES
$('.scroll-up, .scroll-down').bind({
or even:
$('.scroll').bind({

var id = 38;
$('#scroll-up' + id + ', #scroll-down' + id).bind({ ..............

How to show and hide DIV based on URL. in Javascript

I have two URL's
url 1 = www.xyz.co.uk/asd.qmd
url 2 = www.xyz.co.uk/asd.qmd?getstep=4#
I want to show a div(left) when PAGE URL is www.xyz.co.uk/asd.qmd?getstep=4#
In the page form.php I wrote the following code:
<script>
$(function(){
var locate = window.location;
if (locate=="http://localhost/school/form.php") {
$('#left').hide();
} else {
$('#left').show();
}
});
</script>
<body onload="function()">
<div id="left">
aasdsasdfdsgfg
</div>
</body>
Why is this not working?

Just make php condition
<?php
if($_GET['getstep']){
}
?>

$('#left').toggle(window.location.href !== "http://localhost/school/form.php");

You need to make a show/hide function the proper javascript way. What you are doing at first with the (I assume) jQuery is beyond me - just declare a simple function containing the code you already have to show/hide and attach it to the onload-event.

If you just want to hide the div when the query string is empty, you could use the search property of the window.location object:
$(function(){
if (window.location.search === "") {
$('#left').hide();
} else {
$('#left').show();
}
});
Anything more complicated (i.e. a different div for each page value) and I recommend you look at regex

You need to use the href property of the window.location object.
var locate = window.location.href,
myElement = $('#left');
locate == "http://localhost/school/form.php"
? myElement.show()
: myElement.hide();