Javascript slider class - javascript

I'm doing something wrong but can't find what? will be grateful if someone can help me. this JavaScript code works perfectly fine when I check it on my website but once I host it online it does not
$(".slider").click(function(){
if ($('.sliding_navigation').hasClass('trial')){
$('.sliding_navigation').removeClass('trial');
alert('works');
}
else
{
$('.sliding_navigation').addClass('trial');
alert('even this works');
}
});
problem is when i click the slider class it removes the trial class but after that it automatically proceeds to execute the else statement and adds the class creating no effect at all I've been running in circles with this and will be grateful for any help;
this is the html code i'm targeting
<div class="complete_nav">
<header class="slider">MENU</header>
<header class="sliding_navigation trial">
<nav >
<ul>
<b>HOME</b></li>
<li><b>ABOUT ME</b></li>
<li><b>FROM MY PEN</b></li>
<li><b>BOOKS</b></li>
<li><b>REVIEWS AND PRESS</b></li>
<li><b>CONTACT ME</b></li>
</ul>
</nav>
</header>
</div>
trial class has display set to none.

You can replace all that javascript with this :
$(".slider").click(function(){
$('.sliding_navigation').toggleClass('trial');
});
$.toggleClass() alone, checks whether an element has the certain class, and removes it if it does, or adds it if it doesn't.
And this works for me pretty well, just add :
.trial {
display:none;
}
See this fiddle : https://jsfiddle.net/LnpLzykp/
Don't forget to add this to your code :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
EDIT : Perhaps you have more of those in your code, in this case, use this instead :
$(".slider").click(function(){
$(this).parent().find('.sliding_navigation').toggleClass('trial');
});
This way you're telling javascript to toggle the class trial only for the .sliding-navigation that is directly below the .slider.
Check this fiddle : https://jsfiddle.net/LnpLzykp/1/
I'm using four menus to illustrate the new code.

it's official i'm a fool.... i had put the scripts twice so like some people pointed out it was clicking twice.. sorry for wasting your time and thanks a lot

Related

Unable to change the link of a button using Javascript

Hello I am a total newbie (I don't code) and I made a wordpress website in two different languages (french and english) using the Polylang plugin.
But I am facing the following problem : in my website, there is a button linking to a Facebook page in english and when the website is switched to french, I would like the button to link to another Facebook page (that will be in french).
From what I searched so far, I understand that this would be possible using javascript.
And I tried many variations of the following code with no result :
<script>
jQuery(document).ready(function(){
$('html[lang=|fr] .fa-facebook').attr('href', 'https://myfacebookpage.com');
});
</script>
"fa-facebook" is the css class of the social media button.
What am I doing wrong and how can I fix that please ?
Thank you !
Edit : here is the html code of the french version : jsfiddle.net/yup5zxng
I also tried with not result :
<script>
jQuery(document).ready(function(){
$('html:lang(fr-FR) .fa-facebook').attr('href', 'https://myfacebookpage.com'); }); </script>
Basically what you should do is check the language of the <html> tag on document ready and after loop through all the facebook links and update their href. Something like this:
$(document).ready(function() {
const documentLanguage = $("html").attr("lang");
const facebookLinks = $(".fa-facebook");
facebookLinks.each(function(index, link) {
if (documentLanguage === "fr-FR") {
$(link).parent().attr("href", "https://facebook.com/my-french-site/");
} else if (documentLanguage === "en-EN") {
$(link).parent().attr("href", "https://facebook.com/my-english-site/");
}
});
});
Here is a live sample: https://jsfiddle.net/rhernando/kwndv609/3
EDIT
I forgot about the tree structure of your DOM the class element is an <i> tag so you have to point to it's parent element. The updated code should work.
you have a typo in the attribute selector:
| should be before =, not after:
$('html[lang|=fr] .fa-facebook')
More about attribute selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Change elements/classes in/with jquery

I'm new in jQuery and used it right now for a navigation, that slides in and out in mobile or small views. That works fine and correct, but I'm using a plus-icon to open a submenu, that changes into a minus-icon, when the submenu is opened.
But it doesn't change back into the plus-icon, when the submenu is closed.
The code is the following:
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$(this).next('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
});
});
I think the "interesting" part might be the second function, the first is still for a hamburger-icon, that opens the navigation, that works (okay, it doesn't show a sliding animation, what the second one do... no idea, why it don't works...).
So the second part is for the plus. When I click on the plus, the submenu slides in and the plus changes to the minus, but when I click back to the the minus it doesn't change back to the plus.
Has somebody any idea why it doesn't work or can explain me, how I can do it work?
Regards,
Markus
The problem is that your selector is trying to find a span with both plusicon and vertical classes but after the first call to this:
$(this).children('span.plusicon.vertical').toggleClass('plusicon vertical');
wich removes said classes, it is not able to find your target span.
To work around this you could assign an id (iconId on the next example) or another class to your icon so it can be allways found
$('<span class="menu-expander"><span id="iconId" class="plusicon horizontal"></span><span class="plusicon vertical"></span></span>').insertAfter('.level_2');
...
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).children('#iconId').toggleClass('plusicon vertical');
});
Do this :
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
var $icon = $(this).children('#ID OF ELEMENT'); // Would be easier to add an ID to your element whcih you want to alter - limits the error possibilties :)
if($icon.hasClass("CLASS YOU WANT TO GET RID OF"){
$icon.removeClass("CLASS YOU WANT TO GET RID OF");
$icon.addClass("THE CLASS YOU NEED");
else{
$icon.addClass("THE CLASS YOU WANT TO ADD");
}
});
I am at work now so pardon any typing errors.
You basically need to check whether the class that changes the icon to a MINUS symbol is still active - if so you change it back.
I hope it will help.
Points:
to find element good to use find();
better toggle 1 class to show hide element like "show" in example;
With elements inserted with js code better use .on() (for future);
$(document).ready(function() {
$('<span class="menu-expander"><span class="plusicon horizontal">horizontal</span><span class="plusicon vertical show">vertical</span></span>').insertAfter('.level_2');
$('#menu-toggle').click(function() {
$('#navigation-main').slideToggle();
});
$('.menu-expander').click(function() {
$(this).prev('.level_2').slideToggle();
$(this).find('.plusicon').toggleClass('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.plusicon {display:none}
.show {display:block!important}
</style>
<ul>
<li id="menu-toggle" class="level_2">Toggle</li>
</ul>
<ul id="navigation-main">
<li>test</li>
</ul>

JS - Shouldn't this be written better? One function vs multiples?

I have a tweet stream where new tweets are added at the top and the older ones pushed down. You can click on the entire tweet and a panel slides down to reveal, "reply", "retweet", "favorite" etc. The panel is added to each new tweet added in the stream.
The code below works. Shouldn't this be better written so that only one call is being made? Or, as a new tweet is added. would I just have to add to the code with div#tc4, ul#tb4 etc?
$(document).ready(function () {
$("div#tc1").click(function () {
$("ul#tb1").slideToggle("fast");
});
$("div#tc2").click(function () {
$('ul#tb2').slideToggle("fast");
});
$("div#tc3").click(function () {
$('ul#tb3').slideToggle("fast");
});
});
Added Markup:
<div id="tc1" class="tweetcontainer">
<div class="avatarcontainer">
<div class="avatar"></div>
</div>
<div class="content">
<div class="tweetheader">
<div class="name">
<h1>John Drake</h1>
</div>
<div class="tweethandle">
<h2>#Drakejon</h2>
</div>
<div class="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<ul id="tb1" class="toolbar">
<li><a class="reply" href="#"><span>reply</span></a></li>
<li><a class="retweet" href="#"><span>retweet</span></a></li>
<li><a class="favorite" href="#"><span>favorite</span></a></li>
<li><a class="track" href="#"><span>track</span></a></li>
<li><a class="details" href="#"><span>details</span></a></li>
</ul>
I highly recommend separating your javascript from your detailed page function. The best way to do this is to put the retweeting panel inside the tweet container, then you don't even need to give it an id at all or encode in the javascript information about your html structure and ids. You can then just do:
$('.tweetcontainer').on('click', function(event) {
if ($(event.target).is(':descendantof(.toolbar)')) {
//ignore all clicks within the toolbar itself
return;
}
$(this).find('.toolbar').slideToggle();
});​
It's that easy! See it in action in a jsFiddle.
Now you can add as many tweet containers as you want to your page--and your javascript doesn't have to change one bit. Other solutions that require knowledge of specific ids linking to specific ids are suboptimal.
Note the descendantof pseudo-selector is custom (see the fiddle to find out how it works). Also, since you didn't provide any css, I had to choose some--it was quick so don't expect much. (Aww heck I just saw you updated your question to provide a jsFiddle with css giving a far prettier result--but I won't change mine now.) I did have to add a class to the actual tweet itself, but there is probably a better way to style it.
And if you want a click on the displayed toolbar itself (outside of a link) to allow collapsing the toolbar, change the code above to :descendantof(a).
If you don't want to change your page layout, another way to it is to encode the information about the linkage between html parts in the html itself using a data attribute. Change your tweetcontainer div to add a data attribute with a jQuery style selector in it that will properly locate the target:
<div class="tweetcontainer" data-target="#tb1">
You don't really have to remove the id if you use it elsewhere, but I wanted you to see that you don't need it any more. Then on document.ready:
$('.tweetcontainer').click(function () {
$($(this).data('target')).slideToggle('fast');
});
Here is another jsFiddle demonstrating this alternate technique (though it less elegant, in my opinion).
Last, I would like to mention that it seems possible you have a little bit of "div-itis". (We have all been there.) The toolbar anchor elements have unnecessary spans inside of them. The tweet name h1 element is inside a div, but could just be an h1 with class="name" instead.
In general, if there is only a single item inside a div and you can change your stylesheet to eliminate the div, then the div isn't needed. There are an awful lot of nested divs in your html, and I encourage you to remove as many of them as you can. Apply style to the other block elements you use and at least some, if not many, won't be needed.
I'd suggest (though currently untested):
$('div[id^="tc"]').click(function(){
var num = parseInt(this.id.replace(/\D+/g,''),10);
$('#tb' + num).slideToggle("fast");
});
Though given that you don't need the num to be a number (it'd be fine as a string), you could safely omit the parseInt().
Yes, you can write this code much more compactly like this:
$(document).ready(function() {
for (var i = 1; i < 3; i++) {
$("div#tc" + i).click(function() { $("ul#tb" + i).slideToggle("fast"); } );
}
});

calling a function on one page from a link on another page

I have an html page (django) that contains several divs(each displaying different data) and one div that has navigation links. I'll call this my main page. I have an external .js file (jQuery) that reveals one display div on the main page and simultaneously hides all of the others (except the navigation div) based on which nav link is chosen.
$(function(){
$("#sl_sectorbr").click(function showSectorMini(){
$(".minimenu").hide();
$(".minimenu > *").hide();
$("#sector_mini").fadeIn("slow");
$("#sector_mini > *").fadeIn("slow");
});
All of this works fine. My question is, if I want to place "navigation links" on a second html page; that when clicked would both load my main page AND call/execute a specific function like
"showSectorMini()" just as if it were clicked from the main page itself — how would I write that code? I'd really appreciate any help I could get.
Oh.... existing class is...
}
/* ------- Interaction Containers Class -------- */
.interactContainers {
padding:8px;
border:#999 1px solid;
display:none;
}
But you probably already knew that!
Steve
Gentlemen...
This is exactly what I need and mine is less complicated than this. Just one div to open with the script. I am a javascript incompetent person so far. :(
How do you dumb this down to my needs?
Seperate page link is:
Email</div>
Page it goes to code is:
function toggleSlideBox(x) {
if ($('#'+x).is(":hidden")) {
$(".interactContainers").slideUp(200);
$('#'+x).slideDown(300);
} else {
$('#'+x).slideUp(300);
}
}
and the div is this...
<div class="interactContainers" id="interactContainers" style="background-color: #EAF4FF;">
I just want to click the link (Email) from one page...have it open the correct persons(id) profile page...and then execute my existing toggleSlideBox javascript.
Is that doable without a bunch or re-code with javascript that I have about an IQ of 4 in. :\
Thank you for any assistance you provide
S
You could use the hash - link to http://example.com/#sectionOne and read the hash in your ready function.
As SidneySM suggested, a hash is the standard way of handling this. It could go something like this:
In your external js file:
var initSectorUI = function(){
if (location.hash) showSectorMini(location.hash);
};
var showSectorMini = function(sector){
$('#sectors > div').hide();
$(sector).show();
};
On your other pages:
$(function(){
initSectorUI();
$("#navigator a").click(function(){
showSectorMini($(this).attr('href'));
});
});
<div id="navigator">
One
Two
</div>
<div id="sectors">
<div id="one" style="display:none">A one</div>
<div id="two" style="display:none">A two</div>
</div>
You should arrange to produce different versions of the page, and put different onload actions into each version. For example, make the div to show a query parameter, and make django fill in the right onload depending on the query parameter. Then put the different query parameters into the links.

Getting my head around jQuery

OK, I'm designing a site and thought I'd stick some jQuery in as I really need so js experience.
Page with my problem is here: http://new.focalpix.co.uk/moreinfo.php
JS in question is:
$(document).ready(function(){
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideUp('slow');
var id = $(this).attr('href');
$(id).slideDown('slow');
return false;
});
});
This works fine, but if you click on a link where the answer has already slid down, then it slides up, then back down again.
I'm not sure on the cleanest way to stop this happening - any ideas?
You should be using the .slideToggle() effect.
$(document).ready(function() {
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideToggle('slow');
});
});
First, I'd suggest the following structure for your faq's:
<div id="faq">
<div class="qa" id="faq_greenandflies">
<span class="q">What is green and flies</span>
<div class="a">
Super Pickle!
</div>
</div>
<div class="qa" id="faq_redandbadforteeth">
<span class="q">What is Red and bad for your teeth</span>
<div class="a">
a Brick
</div>
</div>
<!--
More FAQ's here
-->
</div>
and then defining your jQuery as follows:
<script type="text/javascript">
$(function(){
// hide all answers
$('div#faq .qa .a').hide();
// bind a click event to all questions
$('div#faq .qa .q a').bind(
'click',
function(e){
// roll up all of the other answers (See Ex.1)
$(this).parents('.qa').siblings().children('.a').slideUp();
// reveal this answer (See Ex.2)
$(this).parents('.qa').children('.a').slideDown();
// return true to keep any other click events
return true;
});
// check location.hash to see if we need to expand one (direct link)
$(location.hash).find('.q a').click();
});
</script>
Explanation:
(Ex.1)
this is the link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
select all of its siblings. (we now have all qa's as a jQ object)
hide the answers
(Ex.2)
this is the line or link that was clicked
get the element that contains this and has a class of 'qa' (the box that contains both question and answer)
reveal the answer
A working demo is here.
This does several things for you:
If a user deep-links to an answer, the answer is automatically revealed
If a user clicks on one answer, all other answers are hidden
You can give your divs proper ids, so which helps search engine optimization of links to individual answers
Use slideToggle() like Soviut said, but just as a tip -- you can declare the display property in the actual CSS file instead of declaring it inside the javascript. jQuery will pick up on the fact that it is hidden in the stylesheet and still perform the appropriate slide function.
You can also use $(".answer").hide();
Instead of setting the display CSS property. Just thought I would let you know.
try using the one method, something like:
$(selector).one('effect', 'data for effect', callback function);
it makes sure an effect only happens once per element.

Categories