I am having issue with the facebook like box. The stream isn't displayed correctly. So i wonder if there is a way so that i can customize the the css. I just need to add float:left to a div and it will all be working but i am not getting a way to do this.
If anyone can guide me so that i can have the desired result, that would be awesome.
You can check the current look of the like box Here. If you just scroll down you can see the texts are not displayed correctly.
I tried to design with js and css too but couldn't get it to work.
If you want the text on the right to display properly, you simply need to change the width from 395 to about 480. Or, are you trying to have the text on the right display below the image? You won't be able to handle that unless you are able to manipulate the source of the iframe -- or use JS after the iframe is loaded.
Related
I have an idea to implement something like this.
There is a small image down and on hovering i need to be able to select some particular area and display that portion of image in zoomed format with the scroll bar. That enables user to see the whole image. I googled for the zoomer and got lots of plugins in JQuery. But i think they are not suitable for my requirement. I need suggestions for how to achieve the end result.My technology stack is angular js.
I am currently developing a Webapp and I am trying to use QuillJS as a WYSIWYG Editor. I am trying to use the 'Bubble' theme as it fits nicely with the rest of my webapp, however when the tooltip is supposed to appear it does not appear on the screen and after checking using the Development console I found that the tooltip is being displayed with a Top value of somewhere around -700 to -1000 and I have absolutely no idea why.
I have tried using an element that was high-up in the HTML Heirarchy in case a parent div was messing something up but that did not solve my problem either.
Can anyone tell me why the tooltip appears so far off the screen?
Here is a JSFiddle with the current state of my code: https://jsfiddle.net/RBrNx/nwozxLzz/
Please Note: Most of my webapp does not function or look great in the JSFiddle, this is not an issue as most of the functionality involves a local database.
You may need the bounds option，set offset parent
bounds
I have some HTML that is output via a CMS that I'm unable to modify. The order of this HTML is wrong, in that DIV-Bottom appears before DIV-Top in the HTML.
If DIV-Top was always going to be the same height, I could easily position:absolute DIV-Bottom to appear below DIV-Top. However, DIV-Top differs in height depending on what elements are loaded inside on page load. As a result, I'm trying to find a way using jQuery to look at the bottom border of DIV-Top after page load, and then position DIV-Bottom directly below this.
I believe this can be done with .offset() or something similar, but my jQuery knowledge and syntax knowledge is very limited so I'm struggling to make this work.
Any help would be much appreciated!
Thanks!
Jamie
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.
Hello I was wondering how to scale text with html. My text looks very large when I make the page smaller. Is there a script or a command that will scale the text down along with the page size?
Well you can use css to change the font-size, if that is what you are referring to.
Your question has me a little confused, but it may just be the way you are phrasing it.
Are you saying that you want the browser to "resize" text, headers, and other content depending on the browser size?
If so, what you are referring to is called responsive design.
Here is a DEMO of a site using this responsive design. (Make the screen bigger/smaller, and let me know if this is what you were trying to achieve)
http://webdesignerwall.com/demo/adaptive-design/final.html
Here is the tutorial behind this demo:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries