Put li attribut on a span - javascript

I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody

simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them

You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));

Related

Add class to anchor-link on other page

I've got a navigation set up with links to anchors on specific page.
This works when on that specific page, but how can I add the class when coming from another page on my site?
<script>
jQuery(function ($) {
$( document ).ready(function() {
$(".sub-menu > li > a").on("click", function(){
$("a.active").removeClass("curlink");
$(this).addClass("curlink");
});
});
});
</script>
Simply pass one more hidden input element say with id navigator
when you are clicking on a link with id #a1 then set this hidden element value to "a1"
Send this element with form
On receiver page check for value of this element say $("#navigator").val();
On the basis of the value of this, which is "a1" in this case, set CSS of link with id a1 whatever you want, using $("#a1").css();
Another method is that on every hyperlink add a GET parameter and receive on the receiver side and on the basis of its value set CSS.
Let's say there are 3 links with id a1,a2,a3
Add a parameter say cameFrom in href URL e.g. href=".../*.html?cameFrom=a1" for link a1 and href=".../*.html?cameFrom=a2" for link a2 and so on
On receiver page get its value by using this function:
function param(name){
return (location.search.split(name + '=')[1] || '').split('&')[0];
}
Use param(cameFrom) and get result.
Link to this function
There are many ideas/ways to achieve this, but if you have separate file which contains navigation code then you can do one way,
you can put in a hidden element with value of id of the <a> tag of menu of navigation. So when you land on the page and found that id value from the hidden field in jquery, you can make that <a> of navigation activated. I mean you can apply active class to that menu.
Tell me if this is not clear, I would try to make it simple.
In simple words,
Add one hidden element in your separate pages like <input type="hidden" value="about_us" id="nav-menu">
And in your master page,put jquery to get this value like:
var nav_menu = $('#nav-menu').val(); so in nav_menu you will have about_us as its value.
Now, in main master view file, you can write jquery to add active class for relevant manu like: $('.sub-menu > li > a').removeClass('active');$('#'+nav_menu).addClass('active');

Enable scroll onClick

I'm working with 2 divs, the first div should fill the whole screen (width & height) and once there is a button or link clicked in it, it should enable the scroll besides take to the second div.
I have been able to set something like this https://codepen.io/malditojavi/project/editor/ZgWYrZ/#0 But I'm unable to change the class of the with my own class 'allowscrolling' that would re-enable that scroll.
I used this function
allowScrolling() {
document.getElementByTagName("body").className = "allowscrolling";
}
Also tried via jquery, with:
<script>
$("button").click(function(){
$("body").css("overflow","scroll");
});
</script>
But both won't enable scroll after I click the first link. Anything I'm missing?
There is no getElementByTagName that returns a single element. There is a getElementsByTagName that returns an array. Use that and get the first element of the arrray to set the class
document.getElementsByTagName('body')[0].className = 'allowscrolling';
document.getElementsByTagName('body')[0].className += ' allowscrolling';
This will do, you can't use jQuery if you don't load it in your project.

Store jQuery in a variable

I've got an FAQ page I'm building. Next to the question, there is a plus sign to expand the content. On click, I've added the class active, but there are many questions, and I don't want to repeat the same jQuery snippet for each question. I've figured out how to find the parent ID but I'm having trouble storing it in an variable to reuse in the jQuery script.
What I want to be able to do:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$('element .expand').toggleClass('active')
})
Is there a way to do this? I get undefined when I do this:
$('.expand').click(function(){
console.log(element)
});
You can use the find() function to locate children of a selected element:
var element = $(this).parent().parent().attr('id')
$('.expand').click(function(){
$("#" + element).find('.expand').toggleClass('active')
});
However, looking at your code, it seems like you just want to toggle the "active" class of the clicked element. If that is the case, you can do this much more simply without a variable at all:
$('.expand').click(function(){
$(this).toggleClass('active')
});

Backbone.js – changes to li element don't display immediately

What I have in my template is just a bunch of divs and a list, consisting of multiple li elements. The use case is simple, the li elements are a dropdown and are displayed only on clicking a button. When the dropdown is visible and someone begins to type, the matching li element should be selected, or there should be a visual indication.
My approach is this, on a keyup event, I look for the typed word (this is quite easy) in the li elements. I find a few elements, which I've confirmed. Now, when I try to do something with these elements, nothing seems to happen WHILE the dropdown is open (right now, I'm trying to .toggle()) these elements. Now, when I click the button again (which showed the dropdown in the first place) (this click hides the dropdown), and then click the same button again to reveal the dropdown, voila! The values have been changed as they should be – the matching elements have been hidden/shown.
This has me stumped. For company policies, I can't upload the code up here, but I'll be very thankful if someone else has had this problem before and can help me out.
EDIT:
Code: function to change the dropdown on keypress, this is being fired correctly:
filterOptionsForKeypress: function (event) {
var typedString = this.$('input.filter-button-text').val(),
searchToken = _.trim(typedString.toLowerCase().replace(/ /g, '_')),
matchingLi = this.$("li[data-field^='" + searchToken + "']", this.$el), // makes no difference with or without the context, this.$el
that = this;
if (matchingLi && matchingLi.length) {
this.$(matchingLi[0]).html('kaka'); // this change shows only if the dropdown is hidden + shown again
console.log('trying to move focus', this.$(matchingLi[0]).attr('data-field'));
}
// this.$el.append('Some text'); -- this works, I see the changes as they happen
}
And the template looks something like this:
<div class="filter-button filter-option {{if !model.include}}button-red{{else}}button-green{{/if}} toggle-dropdown" data-dropdown-class="{{if !model.include}}button-red{{else}}button-green{{/if}}">
<div class="filter-button-text">${model.option}</div>
<div class="filter-drop"></div>
<div class="dropdown filter-dropdown">
<ul>
{{each model.config.options}}
<li data-field="${$value.op}" data-include='${$value.include}'>${$value.name}</li>
{{/each}}
</ul>
</div>
</div>
EDIT #2:
When the dropdown is open, this is how the html looks:
OPEN:
CLOSED:
So basically, apart from adding a few styles to the enclosing div and a class 'open', I don't see any differences.
The problem was that we're using a plugin for dropdown menus. So basically, what we saw on the screen wasn't what we found selecting with this.$(). The solution? Look globally and with a :visible filter voila, problem solved.

check auto generated span class tag with Jquery

i am trying to check an auto generated span class="" content , which i will use it as a condition to determine whether i will show a message to the user or not
here is the span
<span id="sprytextfield1" class="textfieldInvalidFormatState">
what i tried here is to put a Div called email with an id so i can use the following
if ($('email').html('<span id="sprytextfield1" class="textfieldInvalidFormatState">'))
{
alert ("error");
}
but this did not work because if put the span inside my div email this will stop the JavaScript and result in error, because for some data condition i can not close the div at the end of the span.
is there any way to get the span class without putting all the span inside a div ?
Check: http://jsfiddle.net/pratik136/YY5RR/
This will let you get the class of all spans.
If you want to append a span to your div and still get a reference to it (so you can modify it further), I'd suggest doing like this:
$("#email").html(""); // optional: clear email
var mySpan = $('<span id="sprytextfield1" class="textfieldInvalidFormatState"/>').appendTo($('#email'));
Then you can add more things to the span, like text or other elements:
mySpan.text("some text");
mySpan.append('<a>some link</a>');
You mentioned you can't close the div after the span, I understood that you want to add more elements to it, is that correct? Just append (or prepend) them, after creating the span:
$("#email").append(someElement); // Will appear in the end, after the span
$("#email").prepend(someElement); // Will appear in the beginning, before the span
Update: re-reading your question, it's not clear to me what you're trying to check. Will the span be already in your document, and you just want to see whether or not it has a specific class (that you already know)? If that's the case, get the element (you have its id) and use hasClass on it:
if ( $("#sprytextfield1").hasClass("textfieldInvalidFormatState") ) {
alert("error");
}

Categories