On click to menu-toggle change the Menu to Log In - javascript

I have a nav menu.
On click of the Menu button, I want to replace it with Login text
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "container">
<!--Collapse menu with three lines-->
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<!--Actual menu-->
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active">
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Home</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">Blog</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#">About</a>
</li>
<li>
<a data-toggle = "collapse" data-target = ".navHeaderCollapse" href = "#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
I added a class like this
<div id="displaylogin" style="display:none;" >
LOG IN <i class="fa fa-bars"></i>
And trying to show hide like this using the JS.
$(function(){
$('.menu-toggle').click(function(){
$('.align-right').removeClass("visibleClass");
$('.displaylogin').addClass("visibleClass");
});
});
Here's the fiddle for the same.

It seems to me that you're trying to bind the click handler to the wrong element.
From what I can see, within the div#displaylogin you have an a element with the class menu-toggle however since the div#displaylogin is hidden you'll never click on it since it's not visible or clickable within a hidden element.
If you want your code to trigger in the first place you'd have to bind it to the button.navbar-toggle.
$('.navbar-toggle').on('click', function() {
// this line will not work provided the example code
// this is because this class is not in the example
// also this classname should not be used as a selector since you'll use it alot
// when you're using it all over the page jQuery will try to remove this class from every element with class 'align-right'
$('.align-right').removeClass('visibleClass')
// your element uses an ID, not a CLASS - therefore the '.' needs to be a '#'
$('.displaylogin').addClass('visibleClass')
});
The above example tries to point out what is going wrong however I have some additional recommendations so that your code won't turn into frog-soup later on in development.
When you want to bind something to a single element in JS, it's best to use an ID as they are (supposed to be) unique on the page.
This prevents screw-ups when it comes to you making changes later in your code.
also, using the class .align-right as a selector rings like a million alarm bells on my side since this class has such general naming I am assuming that you're going to re-use it on multiple elements.
In turn, every time you re-use that class on different elements it will try to remove the visibleClass from every element that has class="align-right". Can you see how that can become a problem?
This is all just advice so don't take it the wrong way, we're all trying to help each other here and that's what I'm trying to do right now :)
Fixing these issues and updating your question accordingly will allow us to help you until your problem is fixed.
It is also very important to understand that selectors are a very simple thing with very complex consequences when used improperly (as with this .align-right case).
I can't really say this is an answer but it's to large for a comment so I'm just going to keep updating this when more information is available.
Try to debug what you already have with my advice and come back to edit your question if you wish it to be solved, good luck in the process ;)

Related

How to change a Bootstrap class list-group-item active depending on page

So, I have got a couple of html files that share exactly some lines of the code. I have that code with an include and I call that in every single page. It's basically a menu or better saying, a Bootstrap list-group. Here is the code:
<div class="list-group">
<i class="glyphicon glyphicon-send"></i> Page1
<i class="glyphicon glyphicon-cog"></i> Page2
<i class="glyphicon glyphicon-question-sign"></i> Page3
<i class="glyphicon glyphicon-picture"></i> Page4
</div>
The problem with this is that, I need my active class to change depending on which page I'm visiting. Therefore, we can say that the menu is only 99% the same, I mean, that class needs to be changed.
What's the best approach, recommendation or solution to tackle this?
You can, on document ready, check the URL and then apply the active class to the element you need.
$( document ).ready(function() {
var url = window.location.href;
if (url.IndexOf('page1') > -1) {
$(".list-group:first-child").addClass("active");
}
// ... other cases, using switch for each
});
Something like that
You can done through jquery
$(".list-group-item").on("click",function(){
$(".list-group-item.active").removeClass('active');
$(this).addClass('active');
});

Changing Bootstrap Glyphicon on click

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.
I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');
This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});
I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}
If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.

JQuery - setting an "active" class for image-scroll

I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.

Jquery Toggle only works on one Post

I'm having an issue with using Jquery toggle on a feed. I have a hyperlink called Tags. When i click on this it toggles a div underneath it.
It works - But only for the top post in the feed - If I have any other posts in the feed it doesn't work.
Below Is Jquery:-
<script type="text/javascript">
$(function () {
$("#hypfeedTagBtn").click(function() {
$("#divPostBodyTags").toggle();
return false;
});
});
</script>
Below is HTML:-
<div id="divPostFoot_64" class="dPostMain dPostFoot">
<span id="Content_ucFeeds_repFeedThread_lblFeedViewCouont_0" class="spFootReplyCount"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedShareLink_0" class="spFootLinks"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedDeleteLink_0" class="spFootLinks"></span>
<a id="hypfeedTagBtn" class="spFootLinksShowTags">Tags</a>
<a id="Content_ucFeeds_repFeedThread_hypFeedMessageMe_0" class="spFootLinks" href="/Mail/NewMessage.aspx?FeedID=64">Message Me</a>
</div>
<div id="divPostBodyTags" class="dPostMain dPostTAGSDIV" style="display: block;">
<ul id="PostBodyTags">
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
</ul>
</div>
Thanks
Steve
MDN element.id
The ID must be unique in a document, and is often used to retrieve the
element using document.getElementById.
In some documents (in particular, HTML, XUL, and SVG), the id of an
element can be specified as an attribute on the element like so: .
However you can't use this attribute in a custom XML document without
correctly specifying the type of the id attribute in the DOCTYPE.
Other common usages of id include using the element's ID as a selector
when styling the document with CSS.
Note that IDs are case-sensitive, but you should not create IDs that
differ only in the capitalization (see Case Sensitivity in class and
id Names).
Use a class instead of an id if you want to toggle more than one section.

Javascript: Show/Hide multiple elements by name

I need to show/hide multiple elements with the same name when another element is clicked, like
<span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
would hide the elements with the corresponding value when clicked
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>
Also, onclick='' can't be used in the HTML, it has to go in the script. Can't apply any attributes to a tags other than href too (this is for a MediaWiki)
I've tried a bunch of different methods but I can't seem to get it to work, does anybody have any suggestions?
The markup's not valid: there's no such attribute as <span name> or <span value>, and you can't have multiple elements with the same id. All this is likely to confuse any attempts you make to fetch the elements by name or id. Use a class instead, and since what you've got is links to other parts of the page it would seem sensible to mark them up as internal links. You can always style them not to look like links using CSS.
<a class="showhide" href="#one">Click to hide one</a>
<a class="showhide" href="#two">Click to hide two</a>
<div id="one">One</div>
<div id="two">Two</div>
<script type="text/javascript">
for (var i= document.links.length; i-->0;) {
var link= document.links[i];
if (link.className=='showhide') {
var div= document.getElementById(link.hash.substring(1));
Toggler(link, div, true);
}
}
function Toggler(toggler, togglee, state) {
toggler.onclick= function() {
state= !state;
togglee.style.display= state? 'block' : 'none';
return false;
}
}
</script>
On page load, first add an event to all the elements with that name to toggle hide/show. When an element is clicked, loop through all the elements and change their style to display:none or display:block depending on the current state. To identify the current state you can either find the display attribute value or add/delete a class.

Categories