I am using PHP to echo my list of navigation options, this is being done due to different privileges for each user. The list is divided into groups which has a few more list items, one a user clicks on the heading of the group expands, listing the sub-menu. I have been able to set the active class for the menu which is currently open using this piece of javascript:
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//slide up if visible (works fine).
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
//otherwise slideDown (works fine too).
}
});
}
$(document).ready(function() {markActiveLink();initMenu();});
function markActiveLink() {
$("#menu li ul li a").filter(function() {
return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
}).addClass("active")
.closest('ul') //some markup problem
.slideDown('normal');
}
And this is my markup for list that are being displayed:
echo "<ul id='menu'>";
echo "<li><a href='#'>Adminstration</a>
<ul><li>";
echo "<a href='path_to_page/usermanagement.php'>User Management</a>";
echo "</li><li>";
// and some more items
Here administration is my group heading and User Management is my sub-group.
Now using the above piece of code i am still not able to expand my menu on different pages, so that the user knows which page he is on?
I figured out the problem, for some odd reason, it requires me to declare the variable first:
var checkEle = $("#menu li ul li a").filter(function() {
return $(this).prop("href").toUpperCase() == window.location.href.toUpperCase();
}).addClass("active")
.closest('ul'); //get the closest ul
console.log(checkEle);
checkEle.slideDown('normal');
Related
I want to hide an element if one element is already present on the page.
If element with the id:
#wcfmmp_store_about
is present on the page, then hide following element:
.left_sidebar.widget-area.sidebar
So I've found a solution how to do this via js. but I need to this via .css, if possible
var element = document.getElementById('wcfmmp_store_about');
if (typeof(element) != 'undefined' && element != null)
{
document.querySelector('.left_sidebar.widget-area.sidebar').style.display = "none";
} else {
document.querySelector('.left_sidebar.widget-area.sidebar').style.display = "block";
}
Yes you can kind of do this. Here's an example, but it is not full proof though.
This only works if .tohide follows directly after .item or if .tohide follows .item as a sibling.
.item + .tohide {
display: none;
}
.item ~ .tohide {
display: none;
}
<div class="item">item</div>
<div class="tohide">I show up when item is gone</div>
So in this example, if .item exists on the page, then .tohide is hidden. Go ahead and remove <div class="item">item</div> and run it and you will see that .tohide appears now. You can play with it in this jsfiddle: https://jsfiddle.net/qzu7hkcg/1/
$last_itteration = false;
while($row = mysqli_fetch_array($result)){
if ($row['egenskaps_navn'] == $last_itteration) {
} else {
echo "<h3>".$row['egenskaps_navn']."</h3>";
}
echo "<span id='verdi_" .$row['verdi_id']."'>".$row['verdi_tekst']."</span><br />";
$last_itteration = $row['egenskaps_navn'];
}
$(document).ready(function(){
$('h3').click(function(){
$('span').toggle();
});
I have collected data from a database. The idea is that I want to toggle values to show from a list of properties (marked h3). The while loop only prints a property if it already hasnt been printed and the connected values. They are currently hidden in the CSS with "span {display: none;}". Now the toggle will only work for all the values and not the connected ones. Is there a similar way to do it in jquery or javascript as i have done it in the PHP code? To select only one property (h3) for toggling since i don't want to toggel them all at once.
Use nextUntil('h3') to toggle everything between the clicked h3 and the next h3:
$('h3').on('click', function() {
$(this).nextUntil('h3').toggle();
});
Here's a fiddle
This triggers the closest span to the h3 clicked
$(document).ready(function(){
$('h3').click(function(){
$(this).next('span').toggle();
});
});
or as billyonecan mentioned:
$(this).nextUntil('h3','span').toggle();
the second argument makes the function select only the spans
Find the next span of the current h3 on click event on h3 and apply the toggle to it. Try with -
$('h3').click(function(){
$(this).next('span').toggle();
});
i'd like to change the background image of a div depending on wich link is selected in my navigation!
exemple :
let's say I have a menu item called :
#nav li.menu-item-59
when the link is selected it changes to
#nav li.menu-item-59.selected a
I'd like that whenever one of the menu item is selected the background image of the div footer change to a different file...
I've read some articles about sibling operators but can't seem to make it work and I'm not sure it is the best way to go ..
can anyone help?
thanks ! :D
It looks like you're using JS to add the class of selected to the menu. At the same time you're adding that, also add the the menu item name to the footer. something like:
var menuName = $(this).attr('id');
$('.footer').addClass(menuName);
Then in your css for the footer, add the class to the end of the element:
.footer.menu-item-59 {
// background goes here
}
based on your fiddle below, try:
$(window).scroll(function(){
for(var i = 0; i < sections.length; i++)
if($(window).scrollTop() +5 >= sections[i].top &&
$(window).scrollTop() <= sections[i].bottom){
sections[i].link.addClass('selected')
.siblings().removeClass('selected');
var selection = 'selected' + i; // new stuff starts here
$('footer #flag').removeAttr('class');
$('footer #flag').addClass(selection);
}
});
I don't know about sibling operators but this might work...
save all the images in one place.
give all links the same class. for this example ive used 'yourmenuclass'.
then query the document and listen for which one has been clicked.
then in the switch statement to assign a different image, depending on which one has been clicked.
function init() {
[].forEach.call(document.querySelectorAll('.yourmenuclass'), function (el) {
el.addEventListener('click', change);
});
function change() {
if (this.id == 'firstlink') {
var back = document.getElementById("footername");
back.style.backgroundImage =" url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Ferns02.jpg/220px-Ferns02.jpg')";
}
if (this.id == 'secondlink') {
var back = document.getElementById("footername");
back.style.backgroundImage ="url('http://www.dailyshame.co.uk/wp-content/uploads/2012/09/badger.jpg')";
}
}
}
onload = init;
if you are using simple anchors then this may not work, but should be fine for buttons or image inputs.
js fiddle
first time poster but use this site for examples all the time. My small problem is this (and I've researched it, but can't find a solution to my problem)...
I have a text list of 50+ names, and one item for each day, (so a matrix of 50+ x 7) where I want to be able to right click on daily text (a div per day), and display a menu relating specifically to that item per day. This would be no big deal, however, because I need to identify every item individually and use the DivID by JS to call another function, this becomes a big deal. I looked at other jquery menu options, but couldn't figure out how to dynamically retrieve the name correctly.
The problem I have is not creating the menu and capturing the item ID, but it's stopping the ContextMenu from appearing after the right click has been made.
I want the page to have the right click menu elsewhere, but not on these DIV elements, the just menu I'm creating.
The following code has been simplified...
This is the JS I'm using:
function go(e,idname)
{
var rightclick;
e = e || window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
var a = idname.id;
a = (a.substring(11));
ShowContent('ToggleValueFloat'); // Display the DIV
$(document).ready(function()
{
$('#ToggleValueFloat').html('MY MENU TEXT' + EXAMPLE);
return false;
});
return false;
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
This is the PHP I'm using for the example:
echo '<a id="togglePopup' . (int)$arrayEId[$allEntries] . '" onmousedown="go(event,this); return false;">example</a>';
This is the DIV I'm using to show.
<div id="ToggleValueFloat" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;"></div>
I'm trying to get it to return false every time so the Context menu won't display, but it doesn't work. I can disable right click altogether on the page, but this will prove more unproductive than ever.
Any thoughts/help would be great! I'm open to options. Thanks, Steve
For starters, this is a problem:
if (!e) var e = window.event;
which, since all variable declarations are hoisted is the same as this:
var e;
if (!e) e = window.event;
You have an argument named e and now you're creating a local variable of the same name which will override it. You should replace that line with this to just reassign the argument e if it's undefined:
e = e || window.event;
As to your targeting problem why don't you just look at the object in the event that the mouse is targeted at and figure out (before you display the menu) if the targeted object is one that you want to show the menu on or not and then only call the code that shows the menu if the click comes on a desired target.
I have a PHP script that displays all my topics in nested list and I want to be able to click on a link and when doing so have it be highlighted but i don't know how to go about it with my current code, can someone help me with this?
I'm using PHP, CSS and JQuery
Here is my PHP code to display all my topics in nested lists.
function make_list ($parent = 0, $parent_url = '') {
global $link;
echo '<ol>';
foreach ($parent as $id => $cat) {
$url = $parent_url . $cat['url'];
echo '<li>' . $cat['category'] . '';
if (isset($link[$id])) {
make_list($link[$id], $url);
}
echo '</li>';
}
echo '</ol>';
}
$mysqli = mysqli_connect("localhost", "root", "", "sitename");
$dbc = mysqli_query($mysqli,"SELECT * FROM categories ORDER BY parent_id, category ASC");
if (!$dbc) {
print mysqli_error();
}
$link = array();
while (list($id, $parent_id, $category, $url) = mysqli_fetch_array($dbc)) {
$link[$parent_id][$id] = array('category' => $category, 'url' => $url);
}
make_list($link[0]);
You should look at the CSS pseudo classes for links (see here for example). If you don't want to highlight all links, you cann add a class attribute to the php code and then use it in css to further specialize the pseudo classes, e.g.:
Given the following link created by you phpcode (with class):
<li>Some Text</li>
You can now style that link by using the following css selector:
a.highlightedLink:hover {
background-color: Gray;
color: white;
}
This will now highlight the link when you move your mouse over the link. Other pseudo classes let you style the link. Refer to the above reference for the availabel pseudo classes for links.
Add a class to your links. Your generated html should look something like this:
<ol>
<li>Link Text</li>
</ol>
You have to use the .live() method to allow the newly added elements to have the 'click' event handler bound to them:
$(document).ready(function(){
$('a.clickable').live('click',function(){
$(this).css("background-color","yellow");
});
});
This will change the background of the <a> to yellow. To change the background of the <li> instead, use $(this).parent().css().
With this method, once the background is set, you cannot turn it off until the page is reloaded or you trigger another event.
If you would like the highlight to be able to toggle on and off, create a CSS class for it (e.g. .highlight)and add the background-color: yellow to the class. Then instead of:
$(this).css("background-color","yellow");
You can use:
$(this).toggleClass('highlight');
This should be simple enough, with the following jQuery:
$('li a').click(
function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
and CSS:
a.active:link,
a.active:visited {
background-color: #ffa; /* or whatever */
}
a.active:hover {
text-decoration: underline;
background-color: #f90; /* or, again, whatever */
}
Demo at: JS Fiddle.
Edited to add the following:
If you're trying to assign the 'active' (or whatever other) class on page load, and the links are to other portions of your site, then the following might be of use to you:
$(document).ready(
function() {
var topUrl = location.href;
$('li a').each(
function() {
if ($(this).attr('href') == topUrl) {
$(this).addClass('active');
}
});
});
Effectively it assigns the url of the current page to the variable 'topUrl', and checks if any of the links in each of the li elements link to the current page, and, if so, assigns the class 'active' to that link. It does require, in its current incarnation, absolute (not relative) paths in the a elements' href attributes though.
Edited to refine the script somewhat, to remove the requirement of absolute paths in the hrefs.
$(document).ready(
function() {
var topUrl = location.href.split('/').pop();
$('li a[href$=' + topUrl + ']').addClass('active');
});
In this incarnation the URL is split on the / character, and the last section of the returned array is stored in the topUrl variable. The jQuery then looks for an a element within an li element to see if any of those elements end in the same portion, so:
www.example.com/index.html
would assign the 'active' class to any a element whose href ends in index.html, which is obviously not without its problems.