I have this html code where links' target is an iframe.
So I want to add some style, highlighted links. I want to make the active link highlighted only with CSS( or/with php), I'm trying to avoid javascript.
Here is the code:
<ul>
<li>Rhenium</li>
<li>Tellurium</li>
<li>Tin</li>
</ul>
<iframe name="box" src="http://en.wikipedia.org/wiki/Rhenium"></iframe>
Best view: http://jsfiddle.net/WB8e8/
I've tried a lot of css tricks, including a non displayed iframe and combined it with different selectors (~ + >) with < li >, but it only goes messy and make css size big.
I've tried some php conditions too, I've couldn't manage to accomplish a result.
So, how to make this work? how to make a highlighted link when iframe displays content of the url?
Why not some JavaScript?
$(function() {
$('ul li').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
DEMO
You can use the CSS3 attribute selector:
a[target="box"]:active {
font-weight:bold;
}
Related
In my gallery I want to show my images, but I have two formats of images: 1/1:square format, 2/3:portrait format.
I created a class (result) for my ul container and I add the images to it. By modifying some properties I center it vertically and horizontally. Some images appear smaller because of their format I can't just let width (8em).
My question is: Can I add frm as an attribute to my image tag like src? If yes , I'll have this value from my database.
My script doesn't work. My Javascript is:
$(document).ready(function() {
if ($("ul.result li img").attr('frm')='1/1')
{
$("ul.result li img").css('width','10em');
}
if ($("ul.result li img").attr('frm')='2/3')
{
$("ul.result li img").css('width','8em');
}
});
Since you are using jQuery you can use the data method (http://api.jquery.com/data/) and properties on the elements in your html to store whatever it is you want. For your reference, that looks like:
HTML
<img src="file" data-format="square" />
Javascript
$(function () {
$("img").each(function () {
if ($(this).data("format") == "square") {
// process square image element ("this")
} else {
// process normal image
}
});
});
Now, that said - as others have noted you might consider using css classes to change your style rather than writing a bunch of Javascript code. The only reason I would consider writing the javascript (as opposed to css) is if there are complicated calculations that need to happen. Most of the time, though, if you structure your html correctly you can do whatever you need with pure css (no Javascript).
Why are you even using javascript for this?
You have a database property, and you're changing a css property based on a database property. That's what classes are for!
<img class=<?php (img.frm=="1/1"?"square":"portrait") ?> src=..... />
Then, in your css:
.square{
width: 10em;
}
.portrait{
width: 8em;
}
If you want to add a home made attribute, use a HTML5 data attribute,
so it is valid : data-portrait and data-landscape will do fine.
those attributes can be access via CSS or js
To answer your question:
YES you can, but i advise to use :data-frm as attribute name and avoid the use of special caracter in values.
Some reading from W3C :)
I'm trying to hide the title tag when hovered ,or prevent its default action, I've research a lot of method on google. Yes they worked they hide the title but after hiding I cannot use the title caption. I want to Hide it and used it on the latter part of my code.
<a href=\"".$src."\" data-lightbox=\"example-3\" title=\"".$Tri_CAPTION."\">
You can store it inside a node for restoration or reference before removing like this:
$('a').data("title", $('a').attr("title")).removeAttr("title");
console.log($('a').data("title")); //retrieve the `data-title` which we're saving
Demo
Hiding the little title popup when hovering isn't something you can directly control, as it's browser/OS-level behavior.
You could remove the title attribute when hovering via JavaScript, which would provide nothing to display on hover and would presumably disable the hover popup altogether (it does on Chrome 31 for Win7 for me). You would then re-add the title when hovering stops. Example using jQuery's .hover() event listener function:
HTML
<a title="foobar">blarg</a>
JavaScript
var title; // Need to cache the title to add back when hovering stops
$('a').hover(function() {
title = $(this).attr('title');
$(this).attr('title', '');
}, function() {
$(this).attr('title', title);
});
Obviously you'd need to change the selector to which this applies for your own particular markup. I'm not sure how well this would play with your lightbox plugin, unfortunately, but adding it back in may make everything work together anyway.
JSFiddle
You can do thta by using custom attribute and move title to that attribute;
Hover me
$("a").hover(function() {
$(this).prop("data-tite", $(this).attr("title"))
$(this).removeAttr("title");
console.log($(this).prop("data-tite"))
});
Here is a working fiddle: http://jsfiddle.net/Y5kF2/
write the css code like display:none for title attribute
a[title]{display:none;}
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I'm building a dynamic navigation bar which is controlled by PHP, and I'm using images within my list. And I'm applying jQuery for the 'hover' effects. This is the PHP code:
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
And in my navigation list I'm setting 'display:none' and 'display:inline' depending on the return value of $page using a PHP 'if' statement. See code:
<ul id="cssdropdown">
<li class="headlink">
<a class="lightNav" href="index.php" <?php if($page == 'index'){echo "style='display:none !important'";}else{echo "style='display:inline'";}?>><img src="images/navButtons/home.png" /></a>
<a class="darkNav" href="index.php" <?php if($page == 'index'){echo "style='display:inline !important'";}else{echo "style='display:none'";}?>><img src="images/navButtons/home-dark.png" /></a>
</li>....
This is all working fine, the display of the Nav bar images change depending on what page the user is at. But my problem is now I'm trying to integrate jQuery to get a nice 'mouseover / hover' effect. See jQuery code:
$("li.headlink").hover(function(){
$(this).find("a.lightNav").css("display", "none");
$(this).find("a.darkNav").css("display", "inline");
},function(){
$(this).find("a.lightNav").css("display", "inline");
$(this).find("a.darkNav").css("display", "none");
});
But this is causing problems. When the user moves the cursor over the image in the Nav bar for the current page (ie the 'dark' image), it removes the display attribute set by PHP (obviously).
So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none' and tailor my jQuery from there, but for the life of me I cannot figure out how to do, I'm not the worlds greatest javascript/jQuery coder. Is there a way to check if an element has a particular CSS property applied to it, I googled and fiddled with my code for hours, but to no avail.
Thanks in advance everyone.
P.S. I added the CSS !important in my nav bar within the PHP if statement, but this for some strange reason, is only working in Chrome, all other browsers are ignoring this rule.
with jQuery you can check an attribute value like this:
... your code...
alert($(this).find("a.lightNav").css("display"))
As far as using jQuery to hide/show elements, simply use:
$(this).find("a.lightNav").hide()
$(this).find("a.darkNav").show()
No need to fiddle with "display", it's already built-into hide()/show(). You should not need use this either:
style='display:inline !important'"
By default the display is already block or inline, so unless you're using "display:none" you can usually lave these out.
If you have a left-floating menu you should be using float:left, not display:inline
Also inline styles override stylesheet CSS, so you should never need to use !important.
One hint at styling menus, style the A-tag, not the LI. Put the events on the A tags, not the LIs.
If you want to learn how to style menus properly, see my tutorial:
I love lists.
"So I need a way to check on mouseover if 'darkNav' has display 'inline' or 'none'.."
This is untested but you could try something like...
if ($(this).attr('style') == "display:none") {
// do something
}
else if ($(this).attr('style') == "display:inline") {
// do something
}
However, you may want to try addClass() and removeClass() instead of changing and/or using inline CSS.
yep..i'd second that using addClass()l and removeClass() would be loads better...some code like
if($(this).hasClass('visible') {
// do something
}
else {
// do something else
}
seems far better and professional and readable...but just me saying...