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 :)
Related
The WordPress plugin PolyLang provides translations to a chosen language. Its functionality of "Strings translations" consists of a list of strings with custom translations. Every one of these strings is a php function that, once loaded in a web browser, displays a different html string based on the browser's language.
In php:
<?php pll_e('Startpage'); ?>
Becomes in browser: Startpage / Word in another language.
I would like to use these html strings in the right language in my CSS print stylesheet, so that I can add them with "content: ... ;" to my printed page.
The problem is that I can't seem to "send" the output of the php function to my CSS stylesheet without a complicated workaround using JavaScript.
I have already tried Right-way-for-pass-variable-php-to-css-in-wordpress, but including a CSS stylesheet with PHP code as style.php does not work.
Is there another way to do this?
Here is a working solution:
Put the php code that produces the html string into a php file of the page that is always loaded (e. g. the header.php). Assign an ID.
<div id="myid"><?php produces-a-string() ?></div>
Make the html string invisible to the ordinary user with CSS:
#myid {
display: none;
}
Grab the loaded html string with JavaScript to create a CSS variable:
document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText;
grab.setProperty("--grabbed", strText);
}
The html must be loaded before JavaScript, else the corresponding JavaScript variable will be null. Hence put the JavaScript in an event listener "load".
This adds to the CSS code:
#myid {
display: none;
--grabbed: string-produced;
}
The string can then be used by other CSS attributes:
main {
attribute: var(--grabbed);
}
which acts like:
main {
attribute: string-produced;
}
If you want to use the produced string with CSS attribute "content", creating a CSS variable does not work, as content does not accept var() as value.
But content accepts attr() as value. This accesses the HTML global attributes (allowed for any HTML element). I chose the attribute "title".
In JavaScript, you have to assign the global attribute to the element with the class or id to which you want to add a "content" attribute.
document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText;
document.getElementBy[id-where-content-is-added].setAttribute("title", strText);
}
This makes the following possible:
#id-where-content-is-added {
content: attr(title);
}
which acts like:
#id-where-content-is-added {
content: string-produced;
}
In wordpress there is a plugin that assigns a header graphic for each page. You call that header graphic by placing this code in your header.php file:
<?php if(function_exists('show_media_header')){ show_media_header();} ?>
This basically calls the image assigned and places it as an IMG in HTML.
I would like to have it called as a background image with CSS but don't know how. For example:
.header-graphic{ background:url("show_media_header();"); }
I know that will obviously not work but that should explain what I'm trying to do.
Any help would be great.
Thanks!
Depending on the scope of show_media_header() and that it actually returns the path to an image you could write the following:
.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }
However this is of course under the assumption that your css is in the php-file, which wouldn't be recommended. You should look at using SASS or LESS instead.
It's generally a bad idea to serve static files (like CSS) dynamically, since it can't be cached effectively. So inserting the result of show_media_header() directly into your CSS is a no-go.
However, there is an alternative: Insert just that style into the HTML like so:
<h3 style='background-image: url("<?= show_media_header(); ?>");'>
Foo
</h3>
Which can then be further modified by CSS that is in a statically-served and unchanging file - for example:
h3 {
background-position: left 3px top 3px;
}
This of course assumes the function returns just the image URL; I've not used Wordpress personally.
Based on another comment, apparently this function generates a complete <img> tag (ugh!) so you might instead have to do something like this:
<h3>
<?= show_media_header(); ?>
Foo
</h3>
And style it as appropriate like so:
h3 img {
margin: 3px 0 0 3px;
}
I'm gonna post it down here because no one is considering your statement:
"and places it as an IMG in HTML"
You may have to edit you plugin output. Since show_media_header(); echo a value, the function itself is creating a <img> element. Look for the plugin file, search for the function and, either create another one, duplicating the original, something like show_media_header_bg where you manipulate the element, or change the original.
How about if you use descendant CSS selectors as such:
#page #header {
background-image: url("image.jpg");
}
#another-page #header {
background-image: url("another-image.jpg");
}
and so assign each page to its background image.
Here, I'm assuming you can grab into each page by an id (here called "page" and "another-page", and that your header template has an id of header. It would help to see some HTML to see how best to exactly achieve this via CSS.
Got it to work!
Dug around in the plugin PHP file and found this:
function get_media_header_url() {
global $post;
$post_id = $post->ID;
So I did this:
.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }
Works great!
You guys absolutely pointed me in the right direction. THANKS!!!
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;
}
I want to print only the image in a HTML page.
I used
function printImg(){
var URL = "image.png";
var W = window.open(URL);
W.window.print();
}
But executing the code, whole page prints rather the image. Are there any method to print only the image? Pls guide me.
Thanks.
create one print.css that hide all other unwanted divs except the image
If you heard about CSS Media types then you can achieve your desired task with this technique.
Example:
Define Media Type Print and then add a css class.noprint with a css rule display:none; in your css file like given below:
#media print {
.noprint{ display: none }
}
And then apply this class on the elements you don't want to print.
SEE AN EXAMPLE
Hope this will help you a lot.
Use
W.print();
instead of
W.window.print();
W.window makes reference to the parent's window of the pop-up.
Besides this you may consider using an empty page with a window.print triggered on load, instead of your current method which is not waiting for the image to be ready.
== EDIT ==
This can't be done. You can't modify browser settings (i.e. printer settings) from JavaScript
Finally I thought of convert my result to PDF format and print using FPDF Library
You can create an image element then append it to the DOM.
function printImg() {
var img = document.createElement( "img" );
img.src = "image.png";
document.body.appendChild( img );
}
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.