I am using very simple function to hide entire div when clicked and display comments block instead.
Instead of hiding entire div, what I need to do is keep it as it is when clicked, display comment block, but change the class in the span from class="icon expand" to class="icon abate" and hide only "Click here to leave a comment or view what our customers are saying." line so that if it is clicked again it would do the opposite.
here is my script
function myfunc_showComments() {
if ( typeof jQuery != 'undefined' ) {
$('#hidecomments').remove();
}
var commentsParams ={
categoryID: 'Widgets',
streamID: '<?php echo $streamID ?>',
containerID: 'commentsDiv',
}
gigya.services.socialize.showCommentsUI(conf,commentsParams);
}
</script>
<!-- end #review --></div>
<div id="hidecomments">
<div class="button_3" onClick="myfunc_showComments()"><span class="icon expand"></span><h2>Comment & Rate this <span><?php echo $widget_title ?></span></h2><br />Click here to leave a comment or view what our customers are saying.
</div>
</div>
any suggestions or help is highly appriciated
I'd be inclined to put the "Click here..." text that you want to show and hide inside a div of its own:
<div id="hidecomments">
<div class="button_3"><span class="icon expand"></span>
<h2>Comment & Rate this <span><?php echo $widget_title ?></span></h2>
<br />
<div class="instruction">
Click here to leave a comment or view what our customers are saying.</div>
</div>
</div>
...so that it is easier to manipulate from your JavaScript code. Note that I've also removed the inline onClick="myfunc_showComments()" part, because you can just directly bind the handler form your script as follows:
$(document).ready(function() {
$(".button_3").click(function() {
var $this = $(this);
$this.find("span.icon").toggleClass("expand abate");
$this.find("div.instruction").slideToggle();
});
});
The .toggleClass() method adds or removes the specified classes depending on whether they're already there; it can add and remove at the same time so there's no need to manually code an if test to see what the current class is.
The .slideToggle() method is just one of several options that hide an element that is visible or show an element that is not visible. Other options include .toggle() or .fadeToggle().
Working Demo: http://jsfiddle.net/cRjCN/
Note that the document ready wrapper is not needed if the script appears after the elements in question.
use jQuery prop do it like this $(yourselector).prop('class','icon abate');
Edit:
$(".button_3").click(function(e) {
$("span.icon.expand").prop('class','icon abate');
});
just add the code block above inside <script> tags inside your html body tag. preferably before the closing </body> tag.
Related
I have been struggling with this common social networking feature for quite some time. What I am trying to do is to expand the div to display comments, I'm sure you know what I am talking about.
Each post a user sends is automatically echo'd with an anchor link Comments. As mentioned, when this link is clicked, it will simply expand the div displaying all comments assigned to that thought_id.
Even if there are no comments assigned to the post, I still want the div to expand to display a text field so any user can post a comment, preferably echo this:
<?php
<form action='' method='post' enctype='multipart/form-data'>
<table style='width:850px;'>
<tr>
<td><textarea name='msg' rows='2' maxlength='255' cols='80' placeholder=' add your comment...'></textarea></td>
<td><input type='submit' name='send' value='Share'/> </td>
</tr>
</table>
</form>
?>
Here is what I have so far:
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
And here is where the comments anchor link is found. Since it is quite lengthy, I have reduced the echo's content to only the relevant code:
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
Other Infomation:
$thought_id is the id of the though the user posts. (table user_thoughts, column id).
I have another table called user_comments, which stores all comments and links it to the thought it is assigned to by post_id.
At the moment, nothing happens when I click comments.
First, here is a working example of what you want to achieve based on your code.
I had to strip the php part off because jsfiddle doesn't interpret it, so next is your code including the PHP bit.
I assumed that you have jQuery loaded as you added the jquery tag to the question.
It's complicated to know why what you tried doesn't work because we're missing important bit such as: how do you load your content into the DOM? dynamically or not (ajax?)
HTML/PHP
<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
<a href="#" class="toggle-comment" data-id="<?=$thought_id?>" style='padding-left: 5px;'> Comments (<?=$num_of_comments?>) </a>
</div>
<div id='toggleComment<?=$thought_id?>' class='new_comment' style='display:none;'>
<br/> <?=$comment_posted_by?> said: <?=$comment_body?>
</div>
</div>
</div>
Your link was missing an href attribute, which is mandatory for it to be displayed properly. So we set it to the commonly used "#" which means blank anchor. We will then need to catch the click event on this link and prevent its default action so we don't see that ugly # in our url
You should avoid storing big chunks of html in a php var and then echo it but use html templates instead.
You should avoid mixing PHP and javascript like this line in your code that assign a php var into a js one var id = <?php echo $thought_id; ?>;
Instead, You can store your thought_ids as a data attribute of your links and easily fetch them using jQuery's data() later.
Javascript
$(function() {
$("a.toggle-comment").on("click", function(event) {
// prevents browser to go to href's #
event.preventDefault();
// uses Jquery's data() function to get comment id from link's data-id attribute
var id = $(this).data('id');
// get element by id and toggle display
var ele = document.getElementById("toggleComment" + id);
$(ele).toggle();
});
});
Here I got rid of your toggle() function and replaced it with a handler function using jQuery's on() that get called each time we click on a link that has the toggle-comment CSS class. It has the advantage of working on dynamically added content after the page is loaded. jQuery's on() documentation page does a great job explaining this (and the deprecated live() page too)
Notice that you will need to add this toggle-comment class to every of your Comments (X) links
If you are new to jQuery, you should consider reading this page to understand what the first line does and why you need it. (referring to enclosing your code into $(function() {...});)
event.preventDefault(); tells the browser to not perform its default behaviour when clicking on the link (which is go to that link and would append # to the address bar)
$(this).data('id'); reads put the clicked link (this) into a jQuery object and use data() to get the value of its data-id attribute, which is set to $thought_id
CSS issue update
See my updated fiddle for your CSS issue, I removed the float inline styles and positioned div.mini_nav using absolute positioning relative to message_wrapper.
I think that this issue is not related to the original question and should be asked in another one.
PHP Code as per OP's
<?php
$thought_id = 1;
$num_of_comments = 10;
$comment_posted_by = "Me";
$comment_body = "test comment body";
//hard coded above vars to achieve assumptions
echo "<div class='message_wrapper'>
<div class='where_msg_displayed'>
<div class='more_options' style='float: right;'>
// Options, and display picture of the user who posted the
// thought can be found here.
</div>
</div>
<div class='where_details_displayed'>
<div class='mini_nav' style='float: right;'>
// Below is the comments anchor link.
<a href='' onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a>
</div>
// I expect the following piece below to every comment assigned to the thought_id in the database.
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/> $comment_posted_by said: $comment_body
</div>
</div>
</div>";
?>
JavaScript
<script language="javascript">
var id = <?php echo $thought_id; ?>;
function toggle(id) {
var ele = document.getElementById("toggleComment" + id);
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
return false;
}
</script>
The above code worked for me, as per single record.
Now as you have tagged your question under jQuery
you could simply use
$(".message_wrapper .mini_nav a[href!='']").click(function() {
$(this).parent().next().toggle();
});
You could simply use the <details> HTML tag which acts as a disclosure triangle.
<details>
<summary>View comments</summary>
<ul>
<li>You comments</li>
<li>You comments</li>
<li>You comments</li>
</ul>
</details>
https://developer.mozilla.org/en/docs/Web/HTML/Element/details
The only issue is that it is not supported by the lovely IE browsers.
If I understand your question correctly , this is what you are looking for
https://jsfiddle.net/vrqsz3ev/7/
<div class='message_wrapper'>
<div class="main-msg-container">
<div class='where_msg_displayed'>
<input type="hidden" id="msg-id" value="1">
<div class='more_options'>
MESSAGE1
</div>
<div class='mini_nav'>
<button class="open-comment">comments</button>
</div>
</div>
<div class="hide-mess-details">
<div class='where_details_displayed'>
<div id='toggleComment1'class='new_comment msg-id-1'>
sachin said: Hii guysss (cmt of msg 1)
</div>
<form action='' class="comment-form"method='post' enctype='multipart/form-data'>
<textarea name='msg' placeholder=' add your comment...'></textarea>
<input type='submit' name='send' value='Share'/>
</form>
</div>
</div>
</div>
I made it using jQuery
Some of the things to note while looking into the code is
Uses the concept of flexbox in css3 to style it.
if you click on the share button only the comment of the respective message gets updated . For checking I added a message id along with the form when comment button is clicked .for checking purpose I added an alert (message id of the respective messages) if you click the share button
Now you can add your messages under .where_msg_displayed using php
display all the comments under .where_details_displayed (if you want to , you can add details under there respective messages -little edit is needed)
If you are continuing with this code , with little edits you can achieve the above requirements .
I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;
Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
<!-- start menu area -->
<div id="menu" class="editable">
<div id="button1" class="repeatable">Section 1</div>
<div id="button2" class="repeatable">Section 2</div>
<div id="button3" class="repeatable">Section 3</div>
</div>
<!-- end menu area -->
I don't want to give every single button on each page it's own class. I want to use jQuery, PHP, JavaScript or whatever it takes to get it working without having to go through every single button and give it it's own class.
Also, please note I'm not using navigation bars here, I'm using only divs. Every solution I find uses navigation bars and I can't get them to work when using only divs and hyperlinks.
I want to hightlight the button, or colour it etc.. which matches the current active page.
Try something like this using jQuery:
$(document).ready(function(){
$('#menu div.repeatable a').each(function(){
if(document.URL.indexOf($(this).attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
Add .selected to your CSS and style it as needed.
This will loop through the menu items and compare the url in the href attribute to the current active page url.
You can also use the divs inside #menu :
$(document).ready(function(){
$('#menu div.repeatable').each(function(){
if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
<div id="menu" class="editable">
<?php
$i = 0;
while($i < 10)
{
echo '<div id="button'.$i.'" class="repeatable">Section '.$i.'</div>';
$i++;
}
?>
</div>
Read up on loops
Use the jQuery selectors and .each function. I have done something similar here jQuery.attr('src') replace not working in FF.
You could use a similar script to search for every , check the href value and if it fits you, do something with the div... Like adding a style attribute inline, like style="color: #FF0000;" to make the text red or whatever you want/need.
Hello I have the following code:
Javascript/jQuery:
$(document).ready(function() {
$(".clickMe").click(function() {
$(".textBox").toggle();
});
});
Html code printed with a for loop:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 3</div>
I would like to be able:
When the page loads I want the to be hidden and toggle on click.
Using the same ids for <a class="clickMe"> and <div class="textBox"> to be able to toggle or hide the correct/equivalent <div> element.
jsFiddle code:
http://jsfiddle.net/A7Sm4/3/
Thanks
Edit 1: Class instead of Id
Edit 2: Fixed jsfiddle link
id are supposed to be unique
you should use class to do this
[EDIT] updated the jsfiddle to fit Marko Dumic's solution: http://jsfiddle.net/SugvH/
Something like this should do the trick:
$(document).ready(function() {
var divs = [];
$(".textBox").each(function(index) {
divs[index] = this;
});
$(".clickMe").each(function(index) {
$(this).click(function() {
$(divs[index]).toggle();
});
});
});
ID must (as per spec) be unique on the page. You can easily rewrite this to use class attribute:
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled</div>
<a class="clickMe">Toggle my text</a>
<br />
<div class="textBox"> - This text will be toggled 2</div>
...
Initially, you need to either hide div.textBox when DOM becomes ready, or hide it using CSS.
Then you attach click handlers to a.clickMe:
$(function () {
$('a.clickMe').click(function () {
// find first of following DIV siblings
// with class "textBox" and toggle it
$(this).nextAll('div.textBox:first').toggle();
});
});
However, maybe you don't control the markup but desperately need this done, you can keep your markup as it is and still make it work due to the fact that jQuery uses Sizzle framework to query the DOM which can be forced around the limitation of document.getElementById() (which returns only one element).
E.g. suppose you used id instead of class, if you write $('#clickMe'), you'll get the jQuery collection of only one element (jQuery internally used .getElementById() to find the element), but if you write $('#clickMe'), you get the collection of all elements with the id set to "clickMe". This is because jQuery used document.getElementsByTagName('a') to find all anchors and then filtered-out the elements (by iterating and testing every element) whose attribute value is not "clickMe".
In that case (you used your original markup), this code will work:
$(function () {
$('a#clickMe').click(function () {
$(this).nextAll('div#textBox:first').toggle();
});
});
Again, don't do this unless you absolutely need to!
$(document).ready(function() {
$("a").click(function() {
$(this).parent().find("div").toggle();
});
});
Use something similar to this.
Try appending an index to each pair of a/div's ids (clickme1 and textbox1, etc). Then when an a is clicked, read the id, take the index off the end, and show/hide the textbox with the same index.