I have tried to make working this jQuery script, but maybe there is something wrong. I wanted to make the script working by clicking on the arrow on the right side of the page. As you can see from the JavaScript code and jsfiddle test I have try to make slide down the hidden #top-bg.
The JavaScript code:
$(document).ready(function() {
$(".bottone").click(function() {
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
And this is the jsfiddle test: TEST
Where I'm doing wrong?
You are not using the right type of quotation marks.
There is a big difference between:
$(“.bottone”).click(function(){
And:
$(".bottone").click(function(){
You're using "smart quotes" as opposed to regular quotes. Also, there is no need for the a tag, you can remove it and apply the click function directly to triangolo
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Updated jsFiddle
You use the wrong quotes and also you try to catch a click on an empty tag (so nothing in fact)... ;)
Here is a JsFiddle that works : http://jsfiddle.net/uazw6/11/
<div id="top-bg" class="bg"></div>
<div id="top" class="bg">
<div id="triangolo">test
</div>
</div>
Javascript :
$(document).ready(function(){
$(".bottone").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active");
});
});
I have fixed... I have updated your jsfiddle... test it...
your code is now like below...
$(document).ready(function(){
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
You can also fix this issue by changing below code
<div id="triangolo">
</div>
with
<a href="#" class="bottone"><div id="triangolo">
</div></a>
Related
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
How to add text from span tag to data-attr?
Example:
I have this code
<div class="clearfix colelem" id="u92-5"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
And I want to add iconsymbol to data-attr="iconsymbol" of the same element like a:
<div class="clearfix colelem" id="u92-5" data-attr="iconsymbol"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
Yes and it will be with all elements which has a title="icon"
<script>
$( document ).ready(function() {
$("[title*='icon']").attr('data-attr',function(){
// I don't know
}).removeAttr('title');
});
</script>
Do you know how to do it?
So I know it is very simple but I am new in jquery and I need in your help.
I hope you understood my question.
Here is an example that should work for you. There is probably a few ways you can pull this off, but this should hopefully get you started. Please see the attached JSFiddle to see this example in action
$(function() {
$('[title*="icon"] span').each(function(){
$(this).parent().closest('div').attr('data-attr', $(this).text())
});
});
Here is another way you can do this as well
$('[title*="icon"]').each(function(){
$(this).attr('data-attr', $(this).children().closest('span').text());
});
JSFiddle Example
Your <div>s should have attribute title="icon"
You are using a callback to attr() function, so return the value which you need to set inside the function using .text().
$(document).ready(function () {
$("[title='icon']").attr('data-attr', function () {
return $(this).find('span').text();
}).removeAttr('title');
});
Demo
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});
Having an issue where on IE, a # is being added to the end of the URL, after clicking on a toggle. (i.e. website.com/direc/main.html*#*
This is disabling all the toggle functions. Haven't been able to duplicate the issue on FireFox. I have an e.preventDefault(); in each function but I have not been able to resolve this issue by putting e.prevent in different locations.
Code Below:
$(document).ready(function(){
$("#1_EH").click(function(e){
$("#1_S").slideToggle("slow");
e.preventDefault();
});
});
$(document).ready(function(){
$("#2_EH").click(function(e){
$("#2_S").slideToggle("slow");
e.preventDefault();
});
});
<img src="pic.jpg" border="0" alt="" />
<div class="client_box" id="1_S">
<h2>text</h2>
<p>textDirections »</p>
</div>
IDs can't start with digits; the result is undefined and (presumably) broken in Internet Explorer. Fix your ID attributes (1_EH/1_S/etc) to start with a letter instead of a digit.
e.preventDefault() should be the first line following function(e):
$("#2_EH").click(function(e){
e.preventDefault();
...stuff to be done...
});
Example code fixed here: http://jsbin.com/welcome/54005/
Not removing, however, please note that from the poster of the correct answer, this answer is Factually incorrect and should be disregarded.
Try removing the hash tag from the href in your link(s).
For some reason, I can't get jQuery to do what I want it to do.
What I need is for the container div to disappear when one of its children is clicked.
Here's example HTML
<div id="container">
<a href="link">
<div id="child1">
When this is clicked, #container disappears,
including everything contained inside...
</div>
</a>
<a href="link">
<div id="child2">
...or when this one is clicked
</div>
</a>
</div>
Here's what I've tried.
$("#child1").click(function () {
$(#container).hide();
});
and
$("#child1").click(function () {
$(#container).fadeOut("fast");
});
Thanks in advance.
With this code, no matter how many elements you have in your #container div, clicking on them will hide the whole div :
$("#container").children().bind("click", function(e){
e.preventDefault();
$("#container").fadeOut();
});
See here : http://jsfiddle.net/pioul/Bd9Dc/
$("#child1, #child2").click(function(e) {
$(e.target).parents("#container").hide();
}
Something like that? Or more like
$("#container").children("div").click(function(e) {
$(e.target).parents("#container").hide();
}
$("#container").children().click(function(e) {
$("#container").hide();
}
From what you've posted, your selectors are not valid strings.
$(#container) will throw a syntax error, because the syntax should be $(selector) where selector is a string or an object.
So, just update your selectors from
$(#container)
to
$('#container')
Note : even this site's syntax highlighter gives you a hint that something is wrong!