I am new to JS just playing around to understand how it works.
Why isn't my sign (+,-) changing?
When the div expand it remains with a + sigh never goes to -
Thanks
$(document).ready(function(){
$(".expanderHead").click(function(){
$(this).next(".expanderContent").slideToggle();
if ($(".expanderSign").text() == "+"){
$(".expanderSign").html("−")
}
else {
$(".expanderSign").text("+")
}
});
});
Just guessing at the relationship, since you haven't shown your HTML, but you probably need something like this:
$(document).ready(function () {
$(".expanderHead:visible").click(function () {
var content = $(this).next(".expanderContent");
var sign = $(this).find(".expanderSign");
if (content.is(":visible")) {
content.slideUp();
sign.text("+");
} else {
var expanded = $(".expanderContent:visible");
if (expanded.length > 0) {
expanded.slideUp();
expanded.prev(".expanderHead").find(".expanderSign").text("+");
}
content.slideDown();
sign.text("-");
}
});
});
FIDDLE
Related
I'm trying to check if an element is display block, and if it is then i want to execute some code. Below is my code, its a large function but where I'm trying to check if a div is display block is at the bottom, and if it is display block then i want to execute the blur method.
As you can see near the bottom, I started writing if ($suggestionsWrapper === and my intention was to write if suggestions wrapper is display none, then do this. I just can't figure out how to execute this, what I've written doesn't work. Also I am new to all of this so sorry if this is really messy or doesn't make sense, still very much learning.
//Header Search Handler
function headerSearchHandler(){
var $searchInput = $(".header-search input[type=text]"),
$searchSubmit = $(".header-search input[type=submit]"),
$mobSearchBtn = $(".mobile-search-btn"),
$myAccountText = $(".menu-utility-user .account-text"),
$miniCart = $("#header #mini-cart"),
$searchForm = $(".header-search form"),
$headerPromo = $(".header-promo-area");
$suggestionsWrapper = $('#suggestions-wrapper');
//
$mobSearchBtn.on("click touchend", function(e) {
$(this).hide();
//$myAccountText.hide();
$searchInput.show();
$searchInput.addClass('grey-line');
$searchSubmit.show();
$miniCart.addClass("search-open");
$searchForm.addClass("search-open");
setTimeout(function() {
$searchInput.addClass("active").focus();
}, 100);
e.stopPropogation();
});
$searchInput.on("click touchend", function(e) {
$searchInput.addClass('grey-line');
e.stopPropogation();
}).blur(function(e) {
var $this = $(this);
if($this.hasClass("active")){
$this.removeClass("active");
$searchSubmit.hide();
$mobSearchBtn.show();
$miniCart.removeClass("search-open");
$searchForm.removeClass("search-open");
}
});
$searchInput.focus(function(e){
$(this).css('width', '145px');
})
if ($suggestionsWrapper.css('display') == 'none') {
$searchInput.blur(function(e){
$(this).removeClass('grey-line');
$(this).css('width', '145px');
}
})
}//End Header Search Handler
You can create a helper method to check if display is block or not :
function checkDisplay(element) {
return $(element).css('display') == 'block';
}
Then you can check it like :
if(checkDisplay("#myElement")){
console.log("Display is Block")
}
else {
console.log("Display is NOT Block")
}
here is an example : https://jsfiddle.net/fafgqv7v/
You can do something like this I think:
if ($suggestionsWrapper.css('display') == 'block')
{
// true
} else {
// false
}
Based off of your code I think you have the }) wrong, it should be:
if ($suggestionsWrapper.css('display') == 'none') {
$searchInput.blur(function(e){
$(this).removeClass('grey-line');
$(this).css('width', '145px');
})
}
I hope this helps!
I'm wondering if anyone can help solve this problem it would be much appreciated. Why isn't my navbar appearing on my website? I have reviewed my HTML, CSS AND JS and can't seem to identify the problem. Here is my GitHub website link. I do believe the problem could be with the JS though.
JS
var scroll = new SmoothScroll('a[href*="#"]');
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
} else {
$(".navbar").hide();
}
});
}); // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
of_beautifier();
} else {
var a = b ? (c % d) : e[f];
}
You need to add reference of smooth-scroll.js file before javascript.js file because of javascript.js code use smooth-scroll.js object.
<script src="js/smooth-scroll-master/dist/js/smooth-scroll.js"></script>
<script src="js/javascript.js"></script>
It will fix your problem.
you javascript.js uses smooth scroll so it should be included first.
else
you can include or use it in javascript.js like this
$.getScript("js/smooth-scroll-master/dist/js/smooth-scroll.js", function() {
var scroll = new SmoothScroll('a[href*="#"]');
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$('.navbar').css('display', 'flex') // display: flex
} else {
$(".navbar").hide();
}
});
}); // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
of_beautifier();
} else {
var a = b ? (c % d) : e[f];
}
});
I have some issue with javascript after website transfer. All others scripts works fine but not this one
On demo version it works fine, but on live it do nothing and its giving 0 errors.
var vienasloop = true;
if (vienasloop) {
if (window.location.hash) {
$('li').on('click', function() { //here
first = $(this).siblings().eq(0).detach();
$(this).parent().prepend($(this).after(first).detach());
});
if (window.location.hash != "") {
$('li').eq(Number(window.location.hash.slice(1)) + 2).click();
}
}
}
$('body').html(String($('body').html()).replace("var vienasloop = true;",
"var vienasloop = false;"));
}
Jsfiddle
because in your code, the one property doesn't exist, try something like this :
if(window.location.hash) {
$('li').on('click' , function() { //here
first = $(this).siblings().eq(0).detach();
$(this).parent().prepend($(this).after(first).detach());
});
if (window.location.hash != "") {
$('li').eq(Number(window.location.hash.slice(1)) + 2 ).click();
}
}
I currently have the following code on my website:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
I would like to have an if(isset($_GET['email')); trigger this function as well, so have it open on page load if the $_GET variable is set.
I'm rather new with Jquery and not sure if this is possible, I also have another somewhat related question, I'm not sure if I should make a new question for this as I'm fairly new to stackoverflow as well, but here it is.
Say I have two of these:
$(document).ready(function() {
$("#contact").on("click", function(e)
{
e.preventDefault();
$("#contactform").toggle('fast');
});
});
$(document).ready(function() {
$("#archivestop").on("click", function(e)
{
e.preventDefault();
$("#archives").toggle('fast');
});
});
I want one to close if the other one is opened, how would I go about this?
Thanks!
Here's the Javascript-solution:
function getParam(key) {
var paramsStr = window.location.search.substr(1, window.location.search.length),
paramsArr = paramsStr.split("&"),
items = [];
for (var i = 0; i < paramsArr.length; i++) {
items[paramsArr[i].split("=")[0]] = paramsArr[i].split("=")[1];
}
if (key != "" && key != undefined) {
// return single
if (items[key] != undefined) {
return items[key];
} else {
return null;
}
} else {
// return all (array)
return items;
}
};
if (getParam("email")) {
// ...
}
Regarding your second question you can use the following to determine if an element is visible:
var bool = $('.foo').is(":visible");
So to hide an element if it is visible you would do something like this:
if ($('.foo').is(":visible")) {
$('.foo').hide();
}
I'm silly and have answered my first question. I still have yet to have my coffee.
The following works, just insert it into the div that is to be displayed:
<div id="contactform" style="<?php if(isset($_POST['email'])) echo "display:block;" ?>">
content
</div>
I'm having a problem with the following code -
function slideContactDetails() {
if (sliderState == "closed") {
$(".sliderBlock").animate({width:400}, 'slow',function() {$("div.sliderForm").fadeIn("fast"); });
sliderState = "open";
setTimeout(function(){switchImg("first")},300);
}
else if (sliderState =="open") {
$(".sliderBlock").animate({width:0}, 'slow',function() {$("div.sliderForm").fadeIn("fast"); });
sliderState="closed";
setTimeout(function(){switchImg("second")},300);
}
};
var firstState = "images/closeTab.png";
var secondState = "images/contact_us.png"
function switchImg(imgNo){
if (imgNo == "first"){
$('.contactBtnBtn img').attr("src", firstState);
$('.sliderBlockForm').show();
}
else if (imgNo == "second"){
$('.contactBtnBtn img').attr("src", secondState);
$('.sliderBlockForm').hide();
}
}
basically I'm trying to open and close an animated 'contact us' div. When opened I want the image to switch to a close image and visa-versa on close.
The issue I have is that the image switches as requested, but only for a split second as the sliderstate variable has now altered the 'else if' also appears to action and changes the image back again! I have tried to fix using timeouts, this works in all broswers apart from Chrome!
Any advise greatly received!!
Cheers
Paul
$("div.sliderForm").click(
$(this).toggle('slow');
);
Couldn't you just place the image switching in the if/else block, and remove the need for the setTimeout()?
function slideContactDetails() {
if (sliderState == "closed") {
$(".sliderBlock").animate({
width: 400
}, 'slow', function () {
$("div.sliderForm").fadeIn("fast");
});
sliderState = "open";
$('.contactBtnBtn img').attr("src", firstState);
$('.sliderBlockForm').show();
} else {
$(".sliderBlock").animate({
width: 0
}, 'slow', function () {
$("div.sliderForm").fadeIn("fast");
});
sliderState = "closed";
$('.contactBtnBtn img').attr("src", secondState);
$('.sliderBlockForm').hide();
}
};
the following worked for me based on Coding Freaks's answer.
$(".sliderBlock").hide();
$('img.slider').toggle(
function()
{
$(".sliderBlock").animate({width:400}, 'slow',function() {$('.contactBtnBtn img').attr("src", "images/closeTab.png");$('.sliderBlockForm').show();});
},
function()
{
$('.sliderBlockForm').hide();
$(".sliderBlock").animate({width:0}, 'slow',function() {$('.contactBtnBtn img').attr("src", "images/contact_us.png");});
});