coding a responsive site I want to implement a switch between a mobile version and a standard desktop version like the Wikipedia site does.
For this I should have to re-load the current HTML file but force it to use the CSS file for desktops although it is on a mobile screen such as an iPhone.
Is there any possibility to do so? I think Wikipedia uses PHP. But perhaps there is also a way with JS.
I would be very thankful for help. Thanks in advance.
#media handheld {
#foo { position: static; }
}
http://www.w3schools.com/css/css_mediatypes.asp
I think with USER_AGENT you can find if the user is using the site using web or mobile.
Detect the user agent look for some specific information and on the basis of that load different css
$_SERVER['HTTP_USER_AGENT'];
You could also use a php script that checks for the end device, loading a corresponding css file, or even a completely different html document. I worked from this script.
<style>
#media screen
{
p {font-family:verdana} //an example with a paragraph
}
#media handeld
{
p {font-family:arial} //an example with a paragraph
}
</style>
This should work for both!!
read up http://www.w3schools.com/css/css_mediatypes.asp
Related
I am thinking about making a forum with users.
When a user uses the Google Chrome web browser and tries to print a part of my web page(Article) can I record that?
For instance, store the information as 1(used CTRL+P) and 0(didn't use CTRL+P).
If you want only track this for statistics purposes then you can use CSS media print that will be triggered only for printing.
https://www.w3schools.com/css/css3_mediaqueries.asp
<div id="print_stats"></div>
<style>
#media print {
#print_stats {
background-image: url(URL_TO_BACKEND_SCRIPT);
}
}
</style>
PHP side depends of your needs - what you want to track.
site in progress: http://www.modernfuture.net/wordpress
I've been trying to maintain cross-browser continuity and I came across a media query hack that targets chrome 1+/safari 3+
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* ... */
}
I've used this to restyle #social .logo-img and .featuredThumb differently in chrome/safari as they were positioning these elements differently than in Firefox 23. Using this awesome bit of code I was able to restyle #social, and .logo-img but not .featuredThumb. My guess for the cause of this is that the .featuredThumb class was generated in PHP but I'm not sure why this is happening.
Here's the piece of PHP code that's generating the .featuredThumb class
<?php the_post_thumbnail(array(287,250), array('class' => 'featuredThumb')); // Declare pixel size you need inside the array ?>
I could really use some assistance with this matter please! Thank you all!!
I think you need to change
top: 92px;
to:
top: -92px;
that works for me. Not sure if this is what youre after :/
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 have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.
I am building a website that displays recipes. Each recipe appears as part of a blog entry, and will have a link at the bottom to Print this recipe.
What I want to happen is a click on the link opens a new window and fills it with a print-friendly-styled version of the recipe, which is already inside its own <div class="recipe">.
Can I do this with JS/jQuery alone, or do I need to process from the server side? Any ideas how to do this?
EDIT: What would be ideal would be to generate a PDF on the fly, but in lieu of that I'd like a new window, containing only the recipe, for the visitor to print out or save, as they see fit. Print-styles are nice, but most people don't know they exist and can't be bothered to check and see by printing out a page that doesn't look print ready.
There is no need to load a different stylesheet and the only javascript you will need is for triggering the printing dialog.
With CSS alone you can add rules that are only used when printing, you can either use media queries
<style type="text/css">
#media print{
//css printing rules
}
</style>
or use the link tag:
<link rel="stylesheet" media="print" href="styles.css" type="text/css" />
UPDATE: If you want to update the stylesheet on the fly without openning a new window i suggest you check out this Nettuts article or a simpler solution:
$("#css-switch").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});
You can do this simply with CSS alone if you have it load the exact same page but with a different stylesheet.
Yes, you can(Hello Mr. Obama).
Most browsers allow you to pass in a data: format string, like
window.open('data:text/html;charset=utf-8,text%20to%20show');
which would open a new window / tab (that is browser config dependend) with the Content "text to show". You can pass in HTML code in the same manner, probably escaped.
var print = $('<div>', {
id: 'foobar',
html: 'Hello world',
css: {
backgroundColor: '#ff0000',
color: '#ffffff',
width: '200px',
height: '200px'
}
}),
opener = $('<div>').append(print);
window.open('data:text/html;charset=utf-8,' + opener.html());
Demo: http://www.jsfiddle.net/4yUqL/73/
You'll probably need to do a request to the server on the print page and fill in the form fields with the data.
If i was you, i'd go for the pdf creating solution. It is fairly simple to create pdf's on the fly in php, and it will almost certainly give a better user experience to your main audience.
If you want to skip that excersise, i'd do it the following way:
1: fetch the data you need as JSON on the original non-printerfriendly page, and use clientside templating to build the ui. Store the JSON for use on the printerfriendly page
2: when you open the new window, use the exact same method, but use another template optimized for printing.