I have been reading around about how to make the navigation link stay active, when inside a post[ single page ]. I haven't found any solutions so i created a mix of jquery and php, But i don't think this is the right way dough it work.
So I was thinking of how to optimize the code much more. Any ides ?
<?php
if (in_category('news')){ ?>
<script>
$(".menu-item-46 a").css("border-bottom","#000 5px solid");
$(".menu-item-46 a").css("padding-bottom","11px");
</script>
<?php }elseif (in_category('network')){ ?>
<script>
$(".menu-item-47 a").css("border-bottom","#000 5px solid");
$(".menu-item-47 a").css("padding-bottom","11px");
</script>
<?php } ?>
One way to tackle the problem is to take advantage of CSS.
Have a class called "active", and append this to the parent element holding the menu you wish to show.
Example:
<div class="active">
<div class="menu-item-46"><a>My Nav</a></div>
</div>
Then in your css file:
.active .menu-item-46{
border-bottom:#000 5px solid;
padding-bottom:11px;
}
Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"
Related
I have a plugin that uses 3 completely identical divs on the page, using the same classes.
<div class="my-class">
<div class="my-class">
<div class="my-class">
I would like to edit the code of the plugin and add an id to each div, so I can work with it
later using css.
But I don't want to touch the parent code due to the later update issues.
Is there a way to add the id tag to a div using just functions placed in functions.php file ??
Guys, also 1 additional question following the 1 above.
You have downvoted this question -2. I have recently received a message from administrator about my account restriction due to this.
I don't think I asked a stupid question and I'm not a coder my self so maybe it was stupid, but obviously I'm just trying to understand why you didn't take it very well and what type of questions should I avoid in the future.
Your comment would be really appreciated, specially the one who gave it a downvote. Cheers.
You can differ them using CSS, without need to add them ID attribute.
<div class="my-class"></div>
<div class="my-class"></div>
<div class="my-class"></div>
<style>
.my-class {width: 200px; height: 100px; background: red;} /* rules for all .my-class elements, eg. width&height, whatever */
.my-class:nth-child(2) {background: green}
.my-class:nth-child(3) {background: blue}
</style>
http://jsfiddle.net/fwy38om7/
You can refer them using Jquery like
$(".my-class").each(function() {
})
Add below javascript to add id to your div
i=0;
$(".my-class").each(function() {
$(this).attr('id', 'constanttext' + i);
i++;
})
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I am making a fairly complex front page that in essence is a threaded discussion forum. At present all is functional but I want to replace the links after the message that allow one to delete, reply, archive and other functions. At present the links are all text. I can use small images and make them look nicer. However on a busy front page with lots of messages and threads a whole bunch of images will make the whole page look overwhelming.
The way it works for now is each iteration of the call to function that reads a message from db will start a ul and this allows me to nicely pad the child messages and the depth.
Here is what I want to do - create a small popup menu that will show up when someone hovers over the actual message. Because my current way of showing threaded messages using ul and li when I tried to use jqueryui menu widget it wrecks the formatting.
Sorry about all the rambling but is there a way to show a slim line of links above a message when someone hovers over it and each message in the page will obviously need to have different links [to allow blah.php?messageid=...].
I have been looking at jqueryui and learnt it to a tiny extent and still reading the tutorial. Is there a way of doing what I asked above!
Thanks
Your looking for tooltip, Jquery UI has a tooltip
first you initialize the tooltip, this example initialize it for the whole document.
<script>
$(function() {
$( document ).tooltip();
});
</script>
Then you add your tags and use the title attribute to specify what you wish to have for tooltip.
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
a simple way to do this is as follows:
given markup
<div class="menu-pop">
<div class="menu-label">Menu Label</div>
<div class="menu-items">
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
<div class="menu-item">menu choice</div>
</div>
</div>
provide css:
.menu-pop {
position: relative;
}
.menu-pop .menu-items {
display: none;
position: absolute;
}
.menu-pop.dropped .menu-items {
display:inherit;
}
and a simple jquery function:
$(".menu-pop").hover(
function() { $(this).addClass("dropped"); },
function() { $(this).removeClass("dropped" ); }
);
then ... well ... make it pretty.
see the jsfiddle here: http://jsfiddle.net/DomDay/rmSHc/
Here's a piece of my navigation code:
<? if($page == ""){ ?>
<li>
Home
</li>
<? }else{ ?>
<li>
Home
</li>
<? } ?>
I want that #on to include 3 images basically:
With repeat-x. (Which is actually the #on)
Left side of the nav button.
Right side of the nav button.
I tried some solutions I found online, although none seem to work.
Is there a way to do it without wrapping each nav with 2 additional div tags?
Thanks!
There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.
You would do it like so:background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
There's some more information on that here, but as a heads-up, it's a CSS3 property only.
I think what you want are CSS Sliding Doors.
We had a bad experience with a developer not sticking to timelines and what-not so we had to drop them. That being said, we're completing the site on our own and only have a few items left. One of which is a JQuery based navigation toggle that he made... it works fine for the main level of items but when you get into sub menu items, it stops using the appropriate CSS. I'm thinking this is a basic "add this to CSS" answer, but I'm not versed in CSS well enough to figure it out.
The CSS and what I think is the JS calling it can be seen here: http://jsfiddle.net/C8vwJ/
The issue can be seen here: http://74.124.14.50/connecting-point/outreach/ (note the + "toggle open" graphic on the sub-item beneath "Outreach" is on the "Y" of "BeYond"... so it's not being CSS'd to the right as it should be.
Any ideas? Thanks for looking.
Add this line into your CSS file.
.widget-area .current_page_item .page_item .toggle { right: 0; }
Trouble in these lines of css code - style.css line 1291:
.widget-area .current-menu-item .toggle, .widget-area .current_page_item .toggle {
right: 10em;
}
If I try to change this value both '+' link and '-' link moving. Try to brake these properties. I tried to do
<div class="toggle" style="right: 0pt;"></div>
(this can be applied by classname, not inline css)