I have the following frameset:
<frameset rows="625,*" cols="*" framespacing="0" frameborder="0" border="0" noresize>
<frame marginheight="0px" src="music-NEW.php" name="mainFrame" scrolling="NO" frameborder="0" noresize>
<frame marginheight="0px" src="musicplayer.php" name="bottomFrame" scrolling="NO" frameborder="0" noresize>
</frameset>
in IE the frameset renders how I would like, the appearance of one seamless page. in Firefox, the frameset displays with a grabable bar between the frames and allows grabbing the bar and resizing the frame, which I can't seem to get rid of.
also, why do the frames not line up straight in Firefox and Safari?
Add a noresize="noresize" to your frame:
<frame noresize="noresize">
Do you really want the user not to be able to resize your frames?
WHY?
Do you know, how big his screen is? Do you know, if he/she is disabled and cannot read small letters and has to resize this frame?
In my opinion, you better think about fixed sizes and prohibiting something. Your visitor/user won't be lucky. Nonetheless, he/she will always be able to remove this stupid attribute (Firebug e.g.).
Just my two cents.
You might want to know marginwidth and marginheight have to be larger then 0px. Try without that attribute?
marginwidth = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than zero (pixels). The default value depends on the user agent.
marginheight = pixels [CN]
This attribute specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than zero (pixels). The default value depends on the user agent.
Old question now, but perhaps it would be relevant to use an IFRAME in situations like this.
Related
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
I have this problem in many places. Here is one:
<button type="button" name="remove_subnmc" class="btn"><img src="/static/img/delete.png"/></button>
The button simply appears as empty in IE7. It looks fine in all other browsers.
Without the class="btn" it looks even worse.
I'm using Django, but I don't think that's relevant so I haven't tagged it.
Setting the width of the button manually can fix this, even if you pick the exact width the button was already displayed at.
Interestingly, setting a min-width of at least the image size, on either the image or the button, while not changing the button at all, will fix this as well. Any smaller than that and the image is shrunken accordingly. In this case all of my buttons have 16px images and all of my buttons are at least this wide, so a general min-width applied to all of my buttons in IE7 is an acceptable solution.
However, if I wanted to add a wider button image in some cases I would need to make specific exceptions for that just for IE7, so if anyone knows a more elegant solution I would love to hear it.
I'm trying to make an ebook reader. I want each page to scroll sideways (like the Pivot viewer does) but I can't get out how to figure out how many words need to be added to the text box on a screen to before it starts overflowing (I don't want the user to scroll vertically).
Any tips?
Thanks!
There is a Scrollable TextBlock which divide text into blocks of 2048px height. You can use their code to get text that will exactly fit into one page (800px, for example)
Creating Scrollable TextBlock for WP7
If you call the UIElement.Measure(Size) method, then check the UIElement.DesiredSize property, it will tell you the size of an element before it is rendered. You could add text, repeatedly measuring the rendered size.
However ... this will be pretty inefficient. It is much better if you can create a layout that performs what you require automatically.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>