In my site link
http://gpuzzles.com/games/tower-of-hanoi/
There is space difference between text and flash, how can i resolve it
The space belongs to the flash object, so the best solution is editting the flash file.
But you could also use wmode=transparent and a lower z-indexto the flash, and use negative margins to fix the space.
there are some work around to move the div have green background using position:absolute property and giving z-index a bit higher value.
So in your case you have to use position:relative in ID #content-box-in-left-in and then give the child div position:absolute and top: or bottom this way you can move the green background to anywhere by giving some value to top or bottom.
I can't make a Demo here as you only upload the website link not any Demo link.
Related
I use maphilight jquery plugin with hover and onclick features. Which works fine.
Is there a way to draw a rectangle by default on the areamap image at a predefined position and size? So without to hover or click on it, just draw a rectangle right after the page is loaded.
I would like to use this solution with PHP+mySQL search. So when someone searches and finds the desired objec on a page (as a part on an areamap, and I know the position of it), clicking on the result link, I would like to load the page that has this shape and would like to be highlighted or drawn around with a rectangle as long as the person click/hover on another area on the same page. Or if this is not possible, then just drawing the rectangle on the desired position.
Is there a way to accomplish this?
The searching and lauching mechanism is not an issue now... I'll do it somehow. I just need the solution to draw the rectangle on areamap.
I tried using CSS "z-index", canvas and even SVG but the rectangle was always drawn after the area map, so at the bottom of my page and not on the areamap :(
Can anyone help me? Thank you.
your rectangle also needs to have position:absolute css style, e.g.,
$('div.map').append('<div style="position:absolute;left:100px;top:100px;
height:10px;width:10px;background-color:#f00;z-index:1;"></div>');
I have a contact form displayed in an iframe in an overlay div that I have adjusted to fit the div within the guidelines of the div dimensions. There are no scrollbars showing when the div first appears. Then I fill out the form, hit send, and there is a moment right after I hit send that the vertical scrollbar appears, obviously while the form is sending, and then the scrollbar disappears again after I get the confirmation screen.
Now I don't really know where to start, except that I believe my css is good. I have two css files attached to my contact.php. I also have a process_form.php and three javascript files (two of which are jquery references). I don't want to paste all of them here because of all the code. Like I said, I have went through the css up and down, but I am not as experience with js or php to see if it is something in the code there. If anyone can point me in the right direction as to where to look, that would be great. If you want me to post a certain section of code, I will. But like I said, I don't want to just post random code here. In the image above, the top screenshot is before I hit submit, the second image down is seconds after hitting send, and then the last image is my confirmation. The scrollbar is only vertical for a second. And I have already applied the following class to my iframe, which does not help:
.restrict{
width: 700px;
height: 380px;
overflow-y: hidden;
}
What is peculiar about that also, is that I had to adjust the width of all the elements in my contact form perfectly to get it to fit into my display div because the vertical scrollbar kept showing anyways with the above class. So I am not sure why the overflow property wasn't working before I adjusted the width in my css of my elements, but I could not get rid of that vertical scrollbar until I got my form to fit inside my display div.
Any suggestion as to how I can just get the vertical scrollbar not to show up at all would be great if it is too difficult to examine my code to find the problem in the first place.
Instead of using css you can use html to hide scroll bars. Like this-
<iframe scrolling="no"></iframe>
I hope this helps.
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
hopefully a nice easy question for someone :)
I have a gallery strip of photo's which load a main image in the above DIV. The gallery strip appears fine in Chrome but in IE and FF the scroll bars do not appear and the gallery spreads itself out vertically, can anyone help? Thanks in advance! :)
Here is the page
http://www.militarysilver.co.uk/military-silversmith-gallery.php
Many Thanks,
Dan
You need to set a width to div.container other than auto. A fixed width will ensure that the nested list items won't wrap on the browser's edge (auto in you particular case refers to 100% browser width) rather than on pixel 2048 (if you set this as the div's width).
Hope that clarifies things up.
aefxx
Remove the float from your li style in your CSS and replace it with display:inline. Place overflow-x:scroll inside the gallerystrip class.
This way does not require a set width and does not produce unwanted effects.
Hope this helps.
i am trying to display a webpage within a webpage as you can see over here
http://www.yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the top and left part is my site, and the stuff that is the main content in the middle is a different site. i may not be doing it correctly since it is not displaying it at size that fits.
the main content page is:
http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm
You will struggle to make this work perfectly for the following reasons:
You're trying to fit an 800px wide web page into a 700px wide div.
You cannot access the child frame's DOM to manipulate it because it's on a different domain.
You cannot rely on a consistent height for the child frame. Although it has a fixed width, users with different accessibility settings (such as default font sizes) could cause text to wrap and adjust the height of the document.
Although you can overcompensate for point 3 by increasing the height of the iframe to allow for any extra height, you can't really deal with point 1 without changing the layout (mainly the width) of your site.
If I were you, I would look into other avenues of adding the functionality you're looking for. Maybe by contacting the site owner and seeing if they can accomodate your needs.
You are doing it correctly, the page won't fit as it's a fixed width of 800 pixels, it will not squeeze down to fit in your page. So only option for you is to stretch your content area to 800 pixels.
Remove the width and height properties of the iframe tag. Adjust the width style property in the style property so that it is the correct size for the page. It appears that you need to make the iframe wider.
<iframe src="..." frameborder="0" style="width:800px;height:480px;" />
Another option, of course, would be to remove the 'scrolling="no"' from the iframe tag to allow users to use the scrollbar to see the entire inner page.