I want to add one cell in a section each time I click the add button. The page is updated without refreshing.
The html code is:
<section>
<p class="cell">content</p>
</section>
<button type="button" id="addCell">add</button>
How should I implement the js?Thanks!
Very simple, use append() or after(). In your case append() will work better.
$('#addCell').bind('click',function(){
$('section').append('<p class="cell">content2</p>');
});
Unfortunately I can't show you a demo because jsFiddle is under maintenance.
Demo in jsbin: http://jsbin.com/agosap/
I won't give you the code as you haven't shown us what you've attempted, but I will guide you.
You want to bind a click event to the button so you can do stuff when the user clicks it. You can create elements using JS document.createElement or using jQuery. So inside the click event, create the element you want, give it whatever attributes you want, and then append it to the parent div.
$(document).ready(function() {
$("#addCell").click(function() {
$("section").append('<p class="cell">content</p>');
});
});
Related
Hey everyone can someone show me how I would be able to grab an element's current position?
Doesn't do much. All it demonstrate is a button click and grabs the item I want references.
I want to be able to grab it's current position so when I click a button i can display something on top of it.
https://jsfiddle.net/Lkmjzy9d/ignore this <code block> apparently this needs to be here when displaying a jsfiddle link??? idk....
If you don't want to use jQuery, you can use
element.getBoundingClientRect().top
You can get an elements position using jQuery position()
Check the following code snippet
$(document).ready(function(){
var element = $("#Randomitem");
console.log(element.position());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()" id="myButton">Click Me</button>
<span id="Randomitem">Random Item</span>
Hope this helps
CSS isn't a scripting language. Therefore you'll need to use something like jQuery or ReactJS.
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
I know it has been posted before on how to append only once, but my situation is a little unique because I'm attempting to call the function from an href link. I have my code posted on jsfiddle, but it's not working for some reason. The same code on my site works. Can someone help me get this working so that clicking the href link will append a given string to the #services div only one time. The code thats on my actual site appends the "details" over and over again every time I click the link, but I only want it to do it once.
<div id="services">SERVICES</div>
More Details
var details = '<p>Just some additional details</p>';
function moreDetails(){
$('#services').append(details);
}
http://jsfiddle.net/7g59yb5r/1/
I'd use .one() and do it like:
var details = '<p>Just some additional details</p>';
$('a').one('click',function () {
$('#services').append(details);
})
jsFiddle example
I'd strongly recommend you to follow a data attribute based approach for adding such kind of behavior. Otherwise you'll end up with a huge pile of spaghetti code. I recently prepared a small presentation about what I like to call data driven behavior.
Assuming that for your case it would also be fine to show / hide the details with a toggle button you could add such re-usable behavior with a few simple lines of code:
$('[data-toggle-show]').each(function() {
var $element = $(this),
$target = $($element.data('toggleShow'));
$target.hide();
$element.on('click', function() {
$target.toggle();
});
});
Then you can use this functionality anywhere in your markup using a data attribute:
<p>Welcome to the article. Do you want to read more?</p>
<button data-toggle-show="#article-more">read more</button>
<p id="article-more">Here you go! Some more to read...</p>
You can view the example on jsbin
Also, in my opinion, the correct HTML semantics for such behavior is to use a button instead of a link. I've also used a link in the past until I read an interesting debate on where to use a link and where to use a button. Actually the bottom line is that a link should be used where a user can right click to bookmark the URL and a button should be used where you could also decide to disable the possibility to execute the behavior.
Simply do:
<div id="services">SERVICES</div>
More Details
var details = '<p>Just some additional details</p>';
function moreDetails(obj){
obj.setAttribute("href", "")
$('#services').append(details);
}
Is it possible to add a div-element to a table cell/td by using jquery?
In my HTML code I have have div called s (just for testing):
<div id="s">12</div>
In my $(document).ready(function(){ function I I have added the following $("#sale_graph1").html('<div id="s"></div>'); where sale_graph1 is the id of the <td>/cell i want to add the <div>-element to. The cell gets populated with text if I write $("#sale_graph1").text
so I know it is the right cell I'm operating on. But when trying to add the div content nothing shows up in the cell.
Thanks for any help!
This working just fine. See here: http://jsfiddle.net/va5gr/
$('#sale_graph1').html("<div id='s'>12</div>");
(I've added the css to make it more visible)
If however you want to use the contents of your existing div#s then you can do this:
$('#sale_graph1').html($('div#s').html());
Try this code:
$("#sale_graph1").append($('#s'));
and ensure that you have only one element called sale_graph1
After this line:
$("#sale_graph1").html('');
You can add stuff inside your div doing this:
$("#sale_graph1 #s").text('12'); //to add text
or
$("#sale_graph1 #s").html('12'); //to add text with html content
Is this what you want:
$("#sale_graph1").html($('#s').html());
It seems the code is right? But I think maybe some errors at some place.
You can check it like as follow:
1. check if you got the right dom
console.log($('#sale_graph1').length);
insure that you can get '1' in the debugger tool's console
if you pass first step, then you can do
$("#sale_graph1").html('<div id="s">some text</div>');
to make sure you add some text in div#s
then if it dosen't work, you can say the four words;
My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.
You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me
No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)