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
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.
Suppose I have a big div including much text. I want to show my readers only the first few text-lines. So I thought about scaling down the height of the div with javascript/jquery and add a "Read more" button.
Like that:
$('#content').height(20);
Here's a complete example: http://jsfiddle.net/zvQsX/1/
I guess google will index all the content, but will google interpret this as spam?
Thanks for your help!
Best
Andi
I'm not sure, but I think Google interprets a bit of CSS and display:none and simply would consider a hidden content as non-existent or at-least as less relevant than what you display directly.
Your technique is different and I honestly don't know how Google would interpret it. If we consider the law's intent, you are actually giving your users the whole thing (they can read it if they want and it's on the same page), and it shouldn't be considered as black hat thingy.
That said, why do you want to use scaling of div instead of display:none or text-indent:-9999px ?
I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.
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'm trying to be able to drag random highlighted text or images on a random page that is not written by me, thus I cannot simply wrap the text in a div and make it draggable.
Is there any way to get highlighted text or images on a random page, like say Yahoo, and drop it into a container that can recognize what was being dropped into it (like content and content-type) without it even being an explicitly declared draggable?
I've been playing with jQuery, but can't figure it out.
Any help would be greatly appreciated.
Regards,
David
Directly no, but I wonder if it's possible to copy element and then make it droppable?
Have you tried scriptaculous? There are some demos. It uses prototype rather than jquery though...