Here is my markup :
<div class="section-dots active-section"></div>
<div class="section-dots"></div>
<div class="section-dots"></div>
<div class="section-dots"></div>
Here is my JavaScript code:
Note, I am building my markup with the following Jquery code, dynamically:
<script>
var count = 1;
var next;
var url;
var elementId;
// First remove all of the dots
$('.section-dots-container').empty();
$('H2').each(function () {
elementId = 'section-' + count;
url = '#section-' + count;
$(this).attr('id', elementId);
$('.section-dots-container').append('<DIV Class="section-dots"></DIV>');
count++;
});
</script>
This is my script for the click event:
<script>
function setActive() {
next = $(this).find('.section-dots');
next.addClass("active-section");
}
</script>
thus it is setActive that should add "active-section" to the Div inside the anchor tag which I am building dynamically. but I not certain if I am doing this correctly.
It seems like it would be easier to just bind the click event to your element in your js code based on its class rather than adding it into your html.
So maybe change markup to include a common class name like:
<div class="section-dots active-section"></div>
<div class="section-dots"></div>
<div class="section-dots"></div>
<div class="section-dots"></div>
And then just bind a click event to all elements with that class:
$('.section').click(function(){
$(this).find('.section-dots').addClass("active-section");
});
I would un-capitalize the DIV and some other things in your code, but this should work if I'm understanding what you want to do.
$('.section-dots').click(function(){
$(this).addClass('active-section');
});
you are using $(this) without passing any parameter to the function.
<script>
function setActive() {
next = $(this).find('.section-dots');
next.addClass("active-section");
}
</script>
useing jquery, select the element you want to add the class to it and use the addClass("class_to_add") function.
Related
Is there a way to dynamically remove elements with javascript or jquery. Suppose I have a function createElements() which creates new element and another function removeElement() which is suppose to remove the corresponding element. You will notice that when you run the snippet that when you click on the remove button all the element is gone! How could I implement this code? Isn't there a jquery selector where i could simply use removeElement(this) or somenething like that? Any suggestions are most welcome :) thank you.
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement()">remove</button></div>'
);
}
function removeElement() {
alert('element removed dynamically boOoOoOoOooo!')
$('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
You can do it like this:
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >new element created dynamically yay!</p><button onclick="removeElement(this)">remove</button></div>'
);
}
function removeElement(element) {
alert('element removed dynamically boOoOoOoOooo!')
$(element).parent(".newElem").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
You just need to follow one single API. Use either pure JavaScript or jQuery. I would also suggest you to use unobstructive approach. Also, the way you remove the elements is wrong. You are removing everything.
See this way:
$(function() {
$("button#add").click(function() {
$("#boom").after('<div class="newElem"><p >new element created dynamically yay!</p><button class="remove">remove</button></div>');
});
$(document).on("click", ".remove", function() {
alert('element removed dynamically boOoOoOoOooo!')
$(this).closest(".newElem").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<button id="add">Create new element</button>
To be able to always delete the div that encompasses the remove button, you have to traverse the DOM tree. There are lots of jQuery goodies for this: http://api.jquery.com/category/traversing/
In this particular case, I would do the following:
var elementCounter = 0;
function createElements() {
const boom = document.getElementById('boom');
boom.insertAdjacentHTML(
'beforeend', '<div class="newElem"><p >'+elementCounter+': new element created dynamically yay!</p><button onclick="removeElement(event)">remove</button></div>'
);
elementCounter++;
}
function removeElement(event) {
alert('element removed dynamically boOoOoOoOooo!')
$(event.target).closest('.newElem').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boom">
</div>
<br>
<button onclick="createElements()">Create new element</button>
So you pass on the click event to the function as a parameter, and then with event.target you find out which button was clicked. $(event.target).closest(".newElem") will get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
I have the following php while loop code:
while (...($...)){
$convid = $row['ID'];
echo"
<button onclick='getconvo($convid)'>open</button>
<div class="convowrap"></div>
";
}
and the javascript code
<script type='text/javascript'>
$(document).ready(function(){
$(".convowrap").hide(0)
})
</script>
script type='text/javascript'>
function getconvo(id){
$(".convowrap").hide(0).delay(200).slideDown(500)
var convid = id;
$('.convowrap').load('fetch_info.php', {id : convid}, function () {
// do something when success
});
}
</script>
When i click on the button above that says 'open,' all of the div that says convowrap slides, but i only want the current div to slide based on the button that was clicked that was generated from the php while loop.
If the php loop executed three times, when i click on the first button generated by the first loop, the convowrap div slides on all three entries generated by the loop.
What do I do? Please help?
Thanks in advance.
The problem is that all the divs have the same class so its functioning as you it is supposed to ...
As you have the div after the button you can replace
$(".convowrap")
With
$(this).next()
Inside the function for both .load and .hide
(Whichever you want)
more generic
It may be more usefull to assign another class to each div like
<div class='convowrap dummyclass$convid'></div>
And on button click change the selector to match that class like
$('dummyclass'+id)
Hope this helps
As you are using inline onlclick function inside HTML, you have to pass this explicitly like onclick='getconvo(this)'.
Anyway, see the following fiddle and hope you wanted this workaround -
https://jsfiddle.net/nuhil/4scas2gh/
Code:
<button onclick='getconvo(this)' id="1">Button 1</button>
<div class="convowrap">Content First</div>
<br/>
<button onclick='getconvo(this)' id="2">Button 2</button>
<div class="convowrap">Content Second</div>
<!-- More pairs of (button and div) go here -->
<script>
$(document).ready(function(){
$(".convowrap").hide();
})
function getconvo(button){
$(button).next().delay(200).slideDown(500);
// You could use toggle here like following for better UX
// $(button).next().toggle("slow");
// Anyway,
// Get the id from button attribute but make sure you already set it by PHP
var convid = $(button).attr("id");
console.log(convid);
// $(button).next().load('fetch_info.php', {id : convid}, function () {
// do something when success
// });
}
</script>
Hi I need a bit of help modifying my script. What I want to do:
I have a small and easy script. It changes the class of an container so I have influence on the behaviour and looking of the container. In my scenario the buttons open a div with a music player.
My problem is that I need to declare all buttons as a script. The button ID is in my case the onclick function (see code).
So when I have 10 or twenty links I need also everytime to modify the script. My idea is to have a script wich gets feed their variables by id's and classes of containers. So I need not to modify the script file.
// JavaScript Document
function AudioFF() {
var FFplayer = document.getElementById(x);
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
};
dbbtn.onclick = function() {
x = "deepblue";
AudioFF();
};
swbtn.onclick = function() {
x = "spacewalk";
AudioFF();
};
fbtn.onclick = function() {
x = "forest";
AudioFF();
};
drbtn.onclick = function() {
x = "dreamrhythm";
AudioFF();
};
My idea was to use the same class of a button as an id for the container who needs to fade in with a string. The button has e.g. the class btn_a, btn_b … etc. The containers has the id btn_a, btn_b … I wanted the script to catch the class of the button and use this classname as a variable for getElementById. The closebutton is also using the same script to close the container. Thanks for help :-)
I will recommend to use data attribute instead
example like this:
//register listener like this
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//your function
console.log(this.dataset.music);
})
})
<!--your links-->
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<!--just add data-music attribute make it the same with your div id and all set-->
<button data-music="m1">play m1</button>
<button data-music="m2">play m2</button>
<button data-music="m3">play m3</button>
You should be able to set a data tag attribute to the buttons and just read the variable from that:
<button id="myButton" data="variableForMyButton" />
document.getElementById(myButton).onClick = function(e){
x = e.target.getAttribute('data')
}
If multiple params are required you add additional data tags:
<button id="myButton" data="variableForMyButton" data-action="someSweetAction" />
Thanks guys, that was what I was looking for. My function is now like this:
The play button and closebutton are working.
<button data-music="m1">Deep Blue</button>
<div id="m1">Container Content</div>
var btns = document.querySelectorAll('[data-music]');
btns.forEach(function(elm) {
elm.addEventListener('click', function(e) {
//function
var FFplayer = document.getElementById((this.dataset.music));
if (FFplayer.classList.contains("audio-hidden")) {
FFplayer.classList.remove("audio-hidden");
FFplayer.classList.add("audio-shown");
} else {
FFplayer.classList.remove("audio-shown");
FFplayer.classList.add("audio-hidden");
Array.prototype.slice.call(document.querySelectorAll('audio')).forEach(function(audio) {audio.pause();});
}
})
})
And here in jquery. Thanks to you all. You show me the way :-)
jQuery (document).ready(function($){
var btns = $('[data-music]');
$(btns).each(function() {
$('[data-music]').on('click', function(e) {
var FFplayer = $(this).data('music');
$("#" + FFplayer).toggleClass("audio-hidden audio-shown");
});
});
})
I'm trying to add a class to a div by using the title attribute. Currently the alert is correct. However the class isn't added.
JS Part:
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", +clicked_id).addClass("glow");
}
HTML Part:
<div id="sticky" class="" title='sticky1' onclick='index(this.title)'</div>"
I don't know if I got your question right but I understood that you want to filter|find you div by the title. So maybe this code will help you:
function index(clicked_id){
alert(clicked_id);
$('#sticky [title="' + clicked_id + '"]').addClass("glow");
}
This is how I would do it:
$("[title*='sticky']").click(function(){
$(this).addClass("glow");
});
Here is the JSFiddle demo
Why do you need to do it like that? Can't you just set the class on the element clicked?
JavaScript
function index(el){
$(el).addClass("glow");
}
HTML
<div id="sticky" onclick='index(this)'></div>
Instead just pass this:
onclick='index(this)'
now in the function:
function index(el){
var e = $(el).attr('title');
$('#sticky[title="'+e+'"]').addClass("glow");
}
As the element itself is the target one then just use this:
function index(el){
$(el).addClass("glow");
}
or better to go unobtrusive, remove the inline event handler and use this way:
$('#sticky').on('click', function(e){
$(this).addClass("glow");
});
js at Question returns expected results. Missing closing > at html #sticky <div> tag at
onclick="index(this.title)"
following onclick attribute . Additionally,
+
should be removed at
+clicked_id
at .attr() setting title . javascript + operator attempting to convert clicked_id String to Number when placed before string
function index(clicked_id){
alert(clicked_id);
$('#sticky').attr("title", clicked_id).addClass("glow");
}
.glow {
color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="sticky" class="" title="sticky1" onclick="index(this.title)">click</div>
I've created a function that works great but it causes me to have a lot more messy html code where I have to initialize it. I would like to see if I can make it more generic where when an object is clicked, the javascript/jquery grabs the href and executes the rest of the function without the need for a unique ID on each object that's clicked.
code that works currently:
<script type="text/javascript">
function linkPrepend(element){
var divelement = document.getElementById(element);
var href=$(divelement).attr('href');
$.get(href,function (hdisplayed) {
$("#content").empty()
.prepend(hdisplayed);
});
}
</script>
html:
<button id="test1" href="page1.html" onclick="linkPrepend('test1')">testButton1</button>
<button id="test2" href="page2.html" onclick="linkPrepend('test2')">testButton1</button>
<!-- when clicking the button, it fills the div 'content' with the URL's html -->
<div id="content"></div>
I'd like to end up having html that looks something like this:
<button href="page1.html" onclick="linkPrepend()">testButton1</button>
<button href="page2.html" onclick="linkPrepend()">testButton1</button>
<!-- when clicking the button, it fills the div 'content' with the URL's html -->
<div id="content"></div>
If there is even a simpler way of doing it please do tell. Maybe there could be a more generic way where the javascript/jquery is using an event handler and listening for a click request? Then I wouldn't even need a onclick html markup?
I would prefer if we could use pure jquery if possible.
I would suggest setting up the click event in JavaScript (during onload or onready) instead of in your markup. Put a common class on the buttons you want to apply this click event to. For example:
<button class="prepend-btn" href="page2.html">testButton1</button>
<script>
$(document).ready(function() {
//Specify click event handler for every element containing the ".prepend-btn" class
$(".prepend-btn").click(function() {
var href = $(this).attr('href'); //this references the element that was clicked
$.get(href, function (hdisplayed) {
$("#content").empty().prepend(hdisplayed);
});
});
});
</script>
You can pass this instead of an ID.
<button data-href="page2.html" onclick="linkPrepend(this)">testButton1</button>
and then use
function linkPrepend(element) {
var href = $(this).data('href');
$.get(href, function (hdisplayed) {
$("#content").empty().prepend(hdisplayed);
});
}
NOTE: You might have noticed that I changed href to data-href. This is because href is an invalid attribute for button so you should be using the HTML 5 data-* attributes.
But if you are using jQuery you should leave aside inline click handlers and use the jQuery handlers
<button data-href="page2.html">testButton1</button>
$(function () {
$('#someparent button').click(function () {
var href = $(this).data('href');
$.get(href, function (hdisplayed) {
$("#content").empty().prepend(hdisplayed);
});
});
});
$('#someparent button') here you can use CSS selectors to find the right buttons, or you can append an extra class to them.
href is not a valid attribute for the button element. You can instead use the data attribute to store custom properties. Your markup could then look like this
<button data-href="page1.html">Test Button 1</button>
<button data-href="page2.html">Test Button 1</button>
<div id="content">
</div>
From there you can use the Has Attribute selector to get all the buttons that have the data-href attribute. jQuery has a function called .load() that will get content and load it into a target for you. So your script will look like
$('button[data-href]').on('click',function(){
$('#content').load($(this).data('href'));
});
looking over the other responses this kinda combines them.
<button data-href="page2.html" class="show">testButton1</button>
<li data-href="page1.html" class="show"></li>
class gives you ability to put this specific javascript function on whatever you choose.
$(".show").click( function(){
var href = $(this).attr("data-href");
$.get(href,function (hdisplayed) {
$("#content").html( hdisplayed );
});
});
This is easily accomplished with some jQuery:
$("button.prepend").click( function(){
var href = $(this).attr("href");
$.get(href,function (hdisplayed) {
$("#content").html( hdisplayed );
});
});
And small HTML modifications (adding prepend class):
<button href="page1.html" class="prepend">testButton1</button>
<button href="page2.html" class="prepend">testButton2</button>
<div id="content"></div>
HTML code
<button href="page1.html" class="showContent">testButton1</button>
<button href="page2.html"class="showContent">testButton1</button>
<!-- when clicking the button, it fills the div 'content' with the URL's html -->
<div id="content"></div>
JS code
<script type="text/javascript">
$('.showContent').click(function(){
var $this = $(this),
$href = $this.attr('href');
$.get($href,function (hdisplayed) {
$("#content").empty().prepend(hdisplayed);
});
}
});
</script>
Hope it helps.