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.
Related
Is it possible to highlight text in an HTML document using without wrapping it with <span> or any other tag for that matter?
For example, in the HTML code <p>The quick fox</p> I would like to highlight quick but without adding a DOM element around it. Adding a DOM element to a parent element is fine.
Thanks!
No, it is not possible.
You can't tell the browser to render a piece of text differently without inherently changing the DOM, regardless of whether you do it statically or dynamically (with Javascript, for example, as a post processing step).
It is possible if you use an absolutely positioned element with a transparent repeating background image or a transparent background color (using rgba or hsla) and position it over the selected area.
Another way to do it would be to have an absolutely positioned canvas element without a background that takes up the whole browser viewport and draw a transparent rectangle over the selection.
It's not possible.
If you just want no tags in the original source code, it might be possible by adding tags later using Javascript magic. You could do something like
<p highlight="quick">The quick fox</p>
and write a JQuery/Prototype/plain JS function to highlight it on the fly, but what for and why? If you elaborate a bit, someone may come up with an idea.
The only way to do this than I can imagine would be to use the <canvas> element, and render absolutely everything by hand.
I'm working on a website using Squarespace. Squarespace's project pages allow you to add images with a title and description, but you don't have any direct access to edit the page. They currently don't offer the ability to make the images clickthroughs, so I'm trying to use JQuery to add that to the images myself.
Here is the website page I'm working on: Prestigious Affairs
Since the div ids change on every load, I'm trying to use the class of the images used for the project page (project-slide-image) to target them, then using .wrap() to add the href. Can someone let me know what I'm doing wrong, because it sort of works, but the whole section pulses and it messes up the title and description on all of the left offset imgaes.
$(function(){
$("img.project-slide-image:eq(0)").wrap('');
$("img.project-slide-image:eq(1)").wrap('');
$("img.project-slide-image:eq(2)").wrap('');
$("img.project-slide-image:eq(3)").wrap('');
$("img.project-slide-image:eq(4)").wrap('');
$("img.project-slide-image:eq(5)").wrap('');
});
It seems to be working, albeit slightly different, here: Code Snippet
So, after quite a bit of messing around, I managed to figure out a solution. I realize this is probably only relevant to Squarespace, but maybe the code would come in handy in some other situation for someone, so I'll go ahead an post it. I ended up using .insertBefore instead of .wrap since that was causing problems.
This is the JQuery I ended up using:
$(function(){
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(0)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(1)"));
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(2)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(3)"));
$('<div class="mainLinksOuter"><div class="mainLinksRight"></div></div>').insertBefore($("figure:eq(4)"));
$('<div class="mainLinksOuter"><div class="mainLinksLeft"></div></div>').insertBefore($("figure:eq(5)"));
});
So, I ended up inserting the href surrounding a DIV so I could control the size to make sure it would match the image size. I had to do a class for CSS formatting the links that are on the right side of the page and a separate one for the links on the left side in order to keep the inner DIV on top of the images, because of how the Squarespace template works. And then a class for the Outer DIV to add CSS formatting to it.
I then put that inside another DIV to be able to position it where I wanted on the page. Without doing that, I wasn't able to control where the DIV surround by the href ended up, and the site formatting changed for mobile at 768px wide and at 640px wide, so I had to adjust the CSS for those instances.
So, basically, what I end up with is an empty DIV with an href surround it on top of each image, remaining over top of them and adjusting size with the responsive design.
I am working on a CMS project where users can drag and drop different components(such as button, div, etc) from components menu on canvas area. Once they are happy about their layout then they click on button finish. What I want is when finish button is clicked then in popup they should see html and its appropriate CSS code.
How can I parse through those components and generate html, css and Javascript if necessary?
Are there any solutions available? I could not find any after googling.
maybe this approach is different but.
can you use of svg element? because with svg you can get positions for every element and then use for whatever you want (like get positions for example).
here some useful tutorials:
http://www.tutorialspoint.com/html5/html5_svg.htm
http://www.w3schools.com/html/html5_svg.asp (for some reason some people don't like this site)
I have an AngularJS, JS, JQ, HTML5, CSS3 web app. Web interface is supposed to be divided into 2 parts and the first part should be resizable.
I would like to bind location of <preview> element from the first part to the location UNDER the top level of second part (location of "response" word on image) using jquery. So it looked something like this:
It should always be under the border line whenever it goes up or down.
Does anyone know how to solve this using JQuery? Every useful answer is highly appreciated and evaluated.
Thank you.
I might not understand the question but you could try creating a container div around all your HTML elements and giving it a float css property.
then you can cut/paste the element you want underneath to outside of your container and giving it the clear both css property
A great resource for an apple-like time machine animation is "space gallery":
http://www.eyecon.ro/spacegallery
I would like to place text on top of every image to use the gallery as a banner.
I think the best way would be using DIVs and place the IMG and the referring text in it.
Sadly, it's not done by surrounding the "img" by "div"-tags in the .html and changing "img" to "div" in the .js... :(
Do you have an idea to use a DIV or even a better solution?
Well it's a nice plugin, hopefully the author will add it some more methods in the future (or put it to place like github), so this could be done more programatically. At the moment maybe you need to tweak spacegallery.js itself.
My minimal solution is using sibling div's for captions, positioned at top left corner of images and borrowing it's CSS styles. Here is copy of plugin, changes are in spacegallery.js. Use some diff tool to see changes.
I did it to use image alt attributes (added them in index.html) as captions. However it can be done many better ways, this is just basic. It also doesn't work after first cycle, and I didn't add any styles :)