I have a few 'headlines' which, when clicked, I would like for them to expand/change colour etc. I shtere any way of changing the div on click of one of the headlines so that whichever one I click will have it's properties changed. One problem is that it will need to be a single instance...When you click on another 'headline' after clicking one previously, the one clicked before hand will need to be changed back.
So...if 'current' is the one that they have just clicked:
<script>
Function ClickedHeadline() {
document.GetElementByID('current').style.width="auto"
document.GetElementByID('current').style.BackgroundColor="#999"
}
</script>
Maybe it can run a script before the one above to tell the div that has the id 'current', will change back and then run the above script...
I don't think I've explained this very well but I hope you can get what I'm trying to do. It just saves me from making a function every time I make another headline along with all the id's, It'll just get extremely confusing after a while.
I agree with the case sensitive and just think is better to add the objet who you want to modify like this :
function ClickedHeadline(o) {
o.style.width="auto";
o.style.backgroundColor="#999";
}
And in the html you just add
onClick="ClickedHeadline(this);"
I think it's better, you can reuse the function now :) .
Javascript is case sensitive, replace with this
function ClickedHeadline() {
document.getElementById('current').style.width="auto";
document.getElementById('current').style.backgroundColor="#999";
}
(i advise of use always semicolon)
Related
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
I want do to click and display in textarea.
The problem is once I click the fullname, the fullname will display in textarea;
and then click ic, the ic will display in textarea but replaced the fullname.
What should I do to make fullname,ic,hp not replace each other? I want to let user click by the variable they want, therefore I didnt do 3 variables insert in one click.
<span onclick=\"insert_user_eh_name('".$row['fullname']."','','');\">".$row['fullname']."</span>
<span onclick=\"insert_user_eh_name('','".$row['ic']."','');\">".$row['ic']."</span>
<span onclick=\"insert_user_eh_name('','','".$row['hp']."');\">".$row['hp']."</span>
function insert_user_eh_name(fullname,ic,phone){
jQuery("#text-area").val(fullname+ ic +phone);}
So, if you're using jQuery, here's the solution you would want:
var insertIntoTextArea = null;
$('.data').on('click', function(){
insertIntoTextArea += $(this).text();
$("#text-area").val(insertIntoTextArea);
});
Now, you can create the identifier any way you would like, but I used a class just to make it easier. One thing to remember is it's not usually a good idea to mix JS and PHP together. It just ends up being a mess and you'll run into so many problems. Also, it's not how jQuery is meant to operate.
That said, what I did was create a click event handler that will know that on click, append it to the textarea's value and make sure it is ADDED to the existing data, rather than overwrite what they previously had in the textarea.
Does this help?
Here's a JSfiddle just in case
embeded JS code you write in HTML is really strange, but if you don't want the string to replace each other in val, why not add them? for example:
// fullname click
var val = $('#text-area').val()
$('text-area').val(val + fullname)
All you need to write is about string process
I have a like link using twitter bootstrap.
<i class="icon-thumbs-up"></i><span class="badge">${fn:length(page.likes)}</span>
When the user clicks on like link the value within the span should be incremented.
Since i have for every comment a like button i dont know how to perform this task from a single javascript because how i can make sure which span to update.
Also one more thing i have this like button as a hyperlink with href="#". so the page is jumping to the top eveytime i click on the like link. Any idea how i can solve the problem.
For your second problem you could use <a href="javascript:void(0)">
For the first problem, where is your like button? You could always assign a unique id for each of you spans, then onclick the like button , you could use :
document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;
For your existing dom structure just go for
$('.icon-thumbs-up').parent('a').click(function() {
var count = parseInt($('badge').text())+1;
$('badge').text(count);
}
If you wanna give id or class to a then replace $('.icon-thumbs-up').parent('a') with whatever new selector
Two things to explain here:
first : parseInt makes sure that number is passed for the incrementation, it is recommended way because of possibility of this creating silent error in js, passing wrong value tu text of your counter and breaking your page
second: I use +1 instead of ++ because ++ and -- tend to be instable depending on lots of things, so I use them never or only in for loop.
You can use jQuery for that:
Make the <a> tag have a class, for example "likeLink":
<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
$(this).next().text($(this).next().text()+1);
});
</script>
$(this).next() gets the next sibling of the element, in this case the <span>.
For your second question, what do you want the like button to do? If you just want it to appear as a link, you can change the "href" attribute of the link:
<a href="javascript:void('0')">
This would just do nothing, but keep the link.
I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.
After some workarounds i got to idea that replacing textarea with div contenteditable="true"
doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.
Problem is i don't see a way to make this dynamically but doing each one by one.
for example:
if ($('.line:contains(":wink:")').length > 0) {
var oldLineHTML = $('.line:contains(":wink:")').html();
$('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));
I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.
How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.
thanks
}
var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));
My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.
If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:
function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
//Replace the wink here
});
}
$(document).ready(function(){
replaceWinks();
});
I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.
Jeaffrey Gilbert's idea is good, but I have another one that may be interesting:
write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:
using these smilies:
1- [smile]
2- [wink]
3- [shy]
will lead to the following markup
1- <div class="smile"></div>
2- <div class="wink"></div>
3- <div class="shy"></div>
and using CSS, you will give every class of them, a different background image, which is the smile image.
by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself
Using jquery, I currently append html to a div on a click event. The following code allows me to fade in only the appended portion of the div:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow');
This portion works perfectly. But how can I later remove (fade out) only the appended portion? I tried hacking this by storing the html prior to the appending, and then simply hiding everything and showing the stored html. But this does not work well when the same procedure is reused for several divs on the same page (and this seems like poor implementation). Is there a good way to do this?
Just to give an idea of why I need this: Think of a blog type page where for every article on the page there are several comments with only x amount showing by default: the click event fetches the remaining comments and displays them, and then toggling the button again removes the appended comments and sends it back to the original state.
empty() is always an option
jQuery('#main').empty();
Give a look at the empty() function.
It might better solve the problem. Here's the link http://api.jquery.com/empty/
I'd just set and clear the html with '.html()' ...
-- edit
to be more clear, have an area layed out specifically for the addition of these comments:
<div id='commentarea1'></div>
etc.
Try:
var html = "..";
$('<div></div>').appendTo("#id").hide().append(html).fadeIn('slow').addClass('appended');
then later
$('#id .appended').fadeOut('slow'); // or whatever you want to do.
It is not that clear from the question but say you show 5 comments by default and then show x more comments. To get back to the original 5 comment default state you can remove all comments with an index greater than 4 (zero based).
The following assumes each comment goes inside its own div that has a class comment.
$('#id>div.comment:gt(4)').remove();