<!-- 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.
Related
I am trying to hide menu items where they contain the word 'Benefits HIDDEN' in a quick launch list. I have been trying to get a script to work, but no avail so far. Using F12 in Edge, the class I want to hide is as follows;
<span class="menu-item-text">Benefits HIDDEN</span>
Which sites under this DIV
<div class=" noindex ms-core-listMenu-verticalBox" id="zz13_idPDPQuickLaunch">
I was trying this kind of approach;
<script>
$(document).ready(function() {
$(".zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script>
But no luck!
zz13_idPDPQuickLaunch is ID not a class, use #
eg:
<script>
$(document).ready(function() {
$("#zz13_idPDPQuickLaunch *:contains('Benefits HIDDEN')").hide ();
});
</script>
You can use the class/id of element you want to hide as the main part of jQuery selector.
If you want to hide the li tag, you can use(static is the class of the li tag):
$(".static:contains('Benefits HIDDEN')").hide();
Best regards,
Amos
I am using an admin panel for managment and im trying to jump between tables by hiding them and showing each only when a certain id is clicked.
it doesnt work, I hide the div but I cant show it back again... any suggestions where is the mistake in the syntax? already checked for double id's
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(document).ready(function(){
$("#userst").click(function(){
$("#userstable").show();
});
});
</script>
<li>
<i id = "userst" class="clip-grid-6" ></i>
Users
</li>
<div id = "userstable" class="row" style=" overflow:auto; display:none;>
</div>
those are the rellevant lines of code.
Your HTML has some flaws. First the id "userst" has no body. You are targeting the i-tag (italic), which you close before creating the anchor link.
Second you forgot to close the style attribute list in div with id "userstable"
<li>
<i id="userst" class="clip-grid-6" >Users</i>
</li>
To make the anchor tag not fire with jQuery, you would need to add event.preventDefault and have the event as argument in the function.
$("#userst").click(function(event){
event.preventDefault();
$("#userstable").show();
});
Forgot a double quote around style attribute, and add content for div. Also updated Javascript code.
HTML
Try to change from
<div id = "userstable" class="row" style=" overflow:auto; display:none;>
to
<div id = "userstable" class="row" style=" overflow:auto; display:none;">
JS
$("#userst").parent().find("a").click(function(){
$("#userstable").show();
});
FIDDLE
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.
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});
I want to hide all blocks which only contain hidden DIVs (aside from a caption). All elements have to be selected via class names.
In detail, I want each "eventBlock" not to show up when all "groupBlocks" underneath are already hidden. The same with "Menu" which should not show up when all child eventBlocks are hidden.
Each "Menu" contains multiple eventBlocks,
each "eventBlock" contains 1 or more groupBlocks.
I am using classes and cannot use IDs because there are lots of groupBlocks, eventBlocks etc.
DIVs are hidden using JQuery's "hide()" function, if it's relevant.
My HTML basically looks like this:
<div class="Menu">
<strong><a name="one">Menu CAPTION</a></strong><br />
<div class="eventBlock event1">
<p class="underlined">eventBlock CAPTION</p>
<div class="groupBlock group2">
<strong>name</strong><br />
4pm - 6pm<br />
</div>
<div class="groupBlock group1">
<strong>name</strong><br />
5pm - 7pm<br />
</div>
</div>
</div>
This should work:
var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
blocks.parents(".eventBlock").hide();
}
You can do something similar to hide the menu if all groupBlocks are hidden.
Simplest way is by using a single jQuery selector:
$('.eventBlock:not(:has(.groupBlock:visible))').hide();
Personally, I find the not() function more readable, and I can use end() later:
$('.eventBlock').not(':has(.groupBlock:visible)').hide();
Now, you want to hide the Menus as well? It seems a Menu should be hidden if it has no visible eventBlocks, which means it has no visible groupBlocks. So, we can use the same condition as before:
$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();
$('eventBlock').each(function() {
if ($('.groupBlock:visible', this).length)
$(this).show();
else
$(this).hide();
});
could be implemented as plugin