If logo id exists, hide another id on page in JQuery - javascript

Trying to hide a div if a logo exists. Tried a few things with no joy, can you spot the error?
if ($('#mylogo').css('display', 'block') {
$('#sign_up_now').css('display', 'none');
}
and
$(document).ready(function(){
if ($('#my_logo').length) {
$('#sign_up_now').css('display', 'none');
}
});
So if my my_logo is active (display:block) of even present. Hide the div with an ID of sign_up_now
Would be great to have two options working, as I might need to hide a div later if sign_up_now div exists too.
EDIT
When placing in the footer of the page, if running two JQuery functions. I assume they don't seperate script tags just closing off with a ;
<script>
$(document).ready(function () {
if ($('#intrica_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
</script>
<script>
$(document).ready(function () {
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>
or should it be
<script>
$(document).ready(function () {
if ($('#my_logo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
if ($('tr#logout_button').css('display') == 'table-row') {
$('tr#sign_up_now').css('display', 'none');
}
});
</script>

try using :visible and is() to test if the logo is visible, use hide() to hide the logo
if ($('#mylogo').length && $('#mylogo').is(':visible')) {
$('#sign_up_now').hide();
}

$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});
or
$(document).ready(function(){
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').hide();
}
});
put any of these examples.

In your if statement you are assign the display property instead of checking.
Modify your code as below.
$(document).ready(function() {
if ($('#mylogo').css('display') == 'block') {
$('#sign_up_now').css('display', 'none');
}
});

You can get an element display property with the following snippet:
$(document).ready(function() {
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
//element's display is not block
}
});
Elements with visibility hidden or opacity zero are considered to be visible, because they have space in the layout. You can check if element is visible like the following snippet:
function isHidden (element) {
return $(element).is(":hidden") || $(element).css("visibility") == "hidden" || $(element).css('opacity') == 0;
}
var isShowed = !isHidden(checkElement);
If you want to check element is visible display != none and ignoring the parents visibility then you will find that doing .css("display") == 'none' is faster and will give you accurate visibility.

Here you go:
$(document).ready(function(){
if( $('#my_logo').css('display') == 'block' ) {
$('#sign_up_now').css('display', 'none');
} else {
$('#sign_up_now').css('display', 'block');
}
});

You can add a class to your element and detect if element has class or no
if($("#mylogo").hasClass("visible")){
$('#sign_up_now').css('display', 'none')
$("#mylogo").removeClass("visible");
}

Related

function toggle - open all items

guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}

table row text truncation

I have a table which has more/less functionality in the row level. I need to include Expand/Collapse All option in the table level so it will be easier to expand all the rows at once.
In my current code, row level and table level expanding works fine on it's individual.
But when I expand using Expand All link, row level more/less links should also act together. Currently when Expand All link is clicked, row level more/less link still shows as More link but it should get changes to Less link.
Here is my code,
var minimized_elements = $('.grid_moretext span');
minimized_elements.each(function(){
var t = $(this).text();
if(t.length < 55) return;
$(this).html(
t.slice(0,55)+'<span>... </span>'+
'<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
);
});
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
if ($(".tr_expand").text() == "More") {
$(".tr_expand").text("Less");
}
else {
$(".tr_expand").text("More");
}
});
$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
$('a.expand_all').click(function(event){
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
if ($(".expand_all").text() == "Expand All") {
$(".expand_all").text("Collapse All");
}
else {
$(".expand_all").text("Expand All");
}
});
DEMO
I have update a working fiddle with collapse
I have made the following changes:
Use $(this) to set the clicked expand link text rather than the whole class selection ;
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
// console.log($(".tr_expand").text());
if ($(this).text() == "More") {
$(this).text("Less");
}
else {
$(this).text("More");
}
});
In the expand all button, loop through the expand links and simply trigger the click of the link if it has 'More' text, if the row is already expanded, the toggle will collapse it again which was not the expected behavior.
$('a.expand_all').click(function(event){
event.preventDefault();
$('a.tr_expand').each(function(){
if($(this).text() == "More" && $('a.expand_all').text() == "Expand All" )
{
$(this).trigger('click');
}
else if($(this).text() == "Less" && $('a.expand_all').text() == "Collapse All" )
{
$(this).trigger('click');
}
});
if ($(this).text() == "Expand All") {
$(this).text("Collapse All");
}
else {
$(this).text("Expand All");
}
});
DEMO
Two things
One
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
//use $(this) to target current anchor element and check its text with .html
if ($(this).html() == "More") {
$(this).html("Less");
}
else {
$(this).html("More");
}
});
Two
Inside expand_all event click change the html again based on current value
$('a.expand_all').click(function(event){
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
var elem=$(this).next().find('.tr_expand')
if(elem.html()=="More")//check for html again
elem.text('Less');
else
elem.text('More');
});
UPDATE
DEMO
Add a class to tr_expand while clicking on itself and on Expand All to identify whether it has been already expanded or collapsed as below:
$('a.tr_expand').click(function(event){
event.preventDefault();
var elem=$(this).parent().siblings().find("span.more_text");//store reference to element's more_text
elem.toggle();//toggle it
$(this).toggleClass('expand');//toggleClass expand
if ($(this).html().trim() == "More") {
$(this).html("Less");
}
else {
$(this).html("More");
}
});
Next on Expand_all click Loop through each tr_expand and its siblings and toggle it based on presence of class on tr_expand as below:
$('a.expand_all').click(function(event){
event.preventDefault();
$('.tr_expand').each(function(){
var elem=$(this);
if(!elem.hasClass('expand'))//check if element is already expanded
{
//if no find all its `grid_moretext` element and toggle its span.more_text
elem.closest('td').siblings(".grid_moretext").each(function(){
$(this).find("span.more_text").toggle();
});
if(elem.html()=="More")
{
$('a.expand_all').text('Collapse All')
elem.text('Less');
}
else
{
$('a.expand_all').text('Expand All')
elem.text('More');
}
}
else
elem.toggleClass('expand'); //if expand is not there add it again
});
});
Use this so that it will refer to the clicked More link.
if ($(this).text() == "More") {
$(this).text("Less");
}
else {
$(this).text("More");
}
Here is the updated fiddle - http://jsfiddle.net/z9hzstzc/1/ . I have changed the condition check for $('tr.expand') by putting it in a loop.
I have did following changes in your Fiddle
$('a.expand_all').click(function(event){
if ($(".tr_expand").html() == "More") {
$(".tr_expand").html("Less");
}
else {
$(".tr_expand").html("More");
}
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
});
Here is DEMO
Using this jQuery:
$('a.tr_expand').text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
you can easily achieve what you're seeking.
Here I've updated your JSFiddle
// For individual click events
$('a.tr_expand').click(function (event) {
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
$(this).text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
});
//For group toggle
$('a.expand_all').click(function (event) {
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
$('.tr_expand').text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
});
It will do the trick for you.

Javascript/JQuery Nested if statements not working correctly

JSFiddle demonstrating problem (pretty hard to see with the corner box)
I have 4 elements that are linked to each button. When the button corresponding with the section is pressed, it should check that none of the other 3 elements are visible. If another section is visible, it should slide it up before sliding down the desired section.
I thought the best way to do this was nested if statements (if b is visible then if c is visible and so on). At the moment, it works for the first 2 elements, this being because the first if statement corresponds to each of them. However for the others, it's as if it doesn't even get past the first statement and just slides down the section anyway, resulting in multiple sections being open.
Am i using nested if statements incorrectly or is it something that isn't compatible? I don't know if it would be better to hide the sections using jquery instead of css, but i assumed it would work regardless. If I've missed anything out, feel free to ask.
Thanks
(Javascript Code)
$(document).ready(function(){
$("#web-design").click(function(){
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#web-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#web-design-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#web-design-slide").slideDown();
}
});
$("#graphic-design").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#graphic-design-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#branding-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#graphic-design-slide").slideDown();
}
});
$("#branding").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#film-production-slide").css("visibility") == "hidden") {
$("#branding-slide").slideDown();
} else {
$("#film-production-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#branding-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#branding-slide").slideDown();
}
});
$("#film-production").click(function(){
if ($("#web-design-slide").css("visibility") == "hidden") {
if ($("#graphic-design-slide").css("visibility") == "hidden") {
if ($("#branding-slide").css("visibility") == "hidden") {
$("#film-production-slide").slideDown();
} else {
$("#branding-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#graphic-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
} else {
$("#web-design-slide").slideUp();
$("#film-production-slide").slideDown();
}
});
$("#contactFormTitle").click(function(){
if ($("#contactFormArea").css("visibility") == "hidden") {
$("#contactFormArea").slideDown();
} else {
$("#contactFormArea").slideUp();
}
});
});
Your should add class to your container and before showing the desired container, hide all container with that class.
Example
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
<div class="accordion">
Content
</div>
$('.accordion').click(function() {
$('.accordion').slideUp();
$(this).slideDown();
});
Your example
$("#web-design").click(function(){
$(".div-to-hide").slideUp();
$("#web-design-slide").slideDown();
});
$("#graphic-design").click(function(){
$(".div-to-hide").slideUp();
$("#graphic-design-slide").slideDown();
});
<div class = "serviceSliderFilmProduction div-to-hide" id = "film-production-slide">
div-to-hide class is added to your container
Add a slider class (or any other) to each container and link the container with button using data attribute:
Button:
<button class="serviceButton displayed" data-id="#web-design-slide">Find Out More!</button>
Container:
<div class="slider serviceSliderWebDesign" id="web-design-slide">
...
</div>
Script:
$(".serviceButton").click(function(){
// grab the container id from data-id attribute of the button:
var el_id = $(this).data('id');
$('.slider:not('+el_id+')').slideUp('slow', function(){
$(el_id).slideDown();
});
});
DEMO
If you want to also toggle container on click, use slideToggle():
$(".serviceButton").click(function () {
var el_id = $(this).data('id');
$('.slider:not(' + el_id + ')').slideUp();
$(el_id).slideToggle();
});
DEMO

function calling in jquery

I want to show div whose id is deliveryto1 when if condition is true it doesn't show deliverto1 div. This div(#deliverto1) is always showing in else part.
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
}
});
You forgot to hide div in else part. Use .hide() in else part as shown below
$('#delivery').change(function () {
if ($(this).val() == 1) {
$('#deliverto1').show();
$('#deliverto').hide();
} else {
$('#areas').show()
$('#deliverto').show();
$('#deliverto1').hide();
}
});

How to add a class to a div on load?

Here's what I'm using
$(document).ready(function() {
$(".accept").change(function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
});
});
It works after you change the value, but how do I add the style to the div on load to disable?
Do I simpily juse call
$(".generateBtn").addClass("disable");
Or is there a more elegant technique
How about just triggering a change ?
$(document).ready(function() {
$(".accept").on('change', function () {
if ($(this).val() == "0") {
$(".generateBtn").addClass("disable");
} else {
$(".generateBtn").remove("disable");
}
}).trigger('change');
});
I'm guessing you meant to write removeClass and not remove, if so :
$(document).ready(function() {
$(".accept").on('change', function () {
$(".generateBtn").toggleClass('disable', this.value=='0');
}).trigger('change');
});

Categories