I want to replace a section of a html(php) for one of two php files based on the screen resolution. The only way i know to get screen resolution is by javascript, I've searched for ways to get javascript variables in a php script but I can't achieve what i want to do.(I need to change the section content dynamically, replacing one of the two php files any time screen resolution reaches a specific value).
You need to have both HTML code ready, and display the correct one based on the screen resolution. You can use CSS display property for it.
Related
I have to create a website and on every page I have a top nav bar. Acctualy I have 10 sites and when I have to change the content of the NavBar, I have to change it in every single site.
What is here best practice?
I have tryed to create a js file with the NavBar inside (document.write"".....), but with this solution I have to convert the html code into JS code and this is not my favorite solution?
Is there an better way?
Thanks for answer.
I think you should create a navbar.html file, contain the code of your nav bar, then
<?php
include 'navbar.html';
?>
First you can use media in css ,
The #media rule is used in media queries to apply different styles for different media types/devices.
In my words, you can give different style based on screen's width.
The Second method is The Browser Object Model.
BOM, screen.width can return you the width of the current browswer's width.
What would be the simplest way to show a picture, but also allow the user a choice of preset buttons to display the picture at alternative sizes? (note, source photo still shown, just redrawn on the fly at different sizes)
I thought perhaps either if its possibly to dynamically set the size of a table cell with photo contained within, or perhaps a better Javascript alternative?
Answers / examples:
http://home.comcast.net/~urbanjost/resize/resize.html
Change image size with JavaScript
http://ibnelson.com/jQuery/ch03/width2.html
Problem solved :)
I want to print a page on my website via javascript, but it prints in two pages instead of one. What should I change?
All my CSS is inline.
window.print();
Here is my HTML: JSFiddle
Its only table based, but it still is not working. There is no height assigned to it.
A screen has 72ppi, creating things in HTML sticks to this rule as it is on screen so the only thing you can really do is reduce the amount that's in your table or print-screen your table and print it as an image so you can re-size it.
I have some scanned news paper and i want to dynamically generate div above the image. So when users click on specific DIV they are redirected to detail of that news.
How is it possible ?
One way of doing is to create Absoulute positioned div in front of the Image. But i dont want to create DIV for all scanned images. I am searching for some dynamic way. Plus! I am not looking for image Maps.
Example : http://www.express.com.pk/epaper/
This is an e-paper and they are using a single image on their background. Of course they are not creating static html pages each day and redefine their div positions
Edit: For my case i found my solution using Facebook Like Tagging jQuery Plugin.
Have one absolutely positioned <div> and move it around to whatever image is focused. Change the click effect of the div accordingly.
You will have a div containing the image, like this:
<div id="imageDiv">
<img ... />
</div>
And you will use jquery to create a div before the img in your click event:
$("#imageDiv").prepend("<div>created div before image</div>");
Unfortunately, for a variable layout such as a newspaper image, absolutely positioned divs are probably your best bet.
In this case, Javascript would likely cause more problems than it would solve: it isn't a necessity for what you want to achieve, and people with Javascript disabled will be unable to use your site.
One other possibility is to use a server-sided language to read a xml file that says where the divs should be placed over an image. This would allow for a dynamic html page, as only a xml (or similar) file would need to be altered to change content.
I can generate an example if you're interested in this solution.
A slightly easier way may be to use an image map. Here's a good resource with working examples.
I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...
Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?
Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..
You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.
However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.
Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.
Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.
But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.
Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.