I'm setting up a picture album site. When i click on a
thumbnail or a picture, a larger picture pops up in a javascript
window. But it has a space on the top and on the left of my larger pic
in the pop-up window. How do i get rid of that? Also, i want the
window to fit my my pic so there's no space whatsoever around it.
Here is what i have:
Demonstration page: [url]
Adjust the CSS margins of the BODY element with the first slider. The yellow P (paragraph) element resizes to fit its smaller containing block, as I would expect.
Then, adjust the CSS border or padding of the BODY element with the second and third sliders. The P element does not resize, though its origin changes. Instead, it overflows its containing block.
Finally, adjust the margins again. The P element snaps back into its containing block.
As you can see from the source, this is jQuery 1.6.4 and jQueryUI 1.8 pulled from googleapis.com.
Edit: Client is Google Chrome16.0.889.0 dev-m.
I have just been making a JavaScript chat applet, which should open in a new child window. It does all of this fine, and works within Firefox beatifully. However, IE thinks it's necessary to stop my
iFrames from spaning the entire length and width of the Window, and add about 7-8mm of padding/margin to the inside of the Window.
I can't figure out, whether it's adding it to the inside of the window, or the outside of the frame.
Please could someone point out how I might be able to go about removing this padding? It's rediculous. I don't mind the border one bit, but no matter what I do, it's chopping off 14-16mm of the bottom iFrame. The window needs to be resizable, so unfortunately, the bottom iFrame is a
set pixel hight, but the top iFrame works with a percentage (i.e 100% of the frameset surrounding it).
I am using Dreamweaver to open a pop up window when you click in a thundnail to make the picture bigger. In Dreamweaver you have the option to specify the dimensions of the pop up window(in my case the same as the photograph). It seems to work fine in Explorer, but Safari leaves a white border along the right and bottom edges(aprox 14 pix). I have tried to do the window smaller but then in other browsers you need scroll bars. I would like the new window be exactly the same size of the photograph. Is there any easy way to control this?
View 3 Replies View RelatedWhat I want to do is change the border of several images on the page to show a 4px border. There are many images on the page so I just want to call the changeborder() function on the onClick event so as the image that has been clicked changes. However, I don't think using this.style.border to identify the element works when placed within the function. That is, how do I identify, from the function, which image has been clicked? My current code (which does not work) looks like this but I am sure its possible to gather what i'm trying to achieve:
<script type="text/javascript">
function changeborder()
{
this.style.border='4px solid red'
}
</script>
<img style="border: 1px solid #F4F4F4;" onclick="changeborder()" src="images/colours/010.jpg" border="0">
is there a way how to detect if mouse is over the border table and over cell border? and if yes, when user click and host button and move mouse cursor (to increase cell width) which event should i detect ?
View 1 Replies View RelatedI've written a re-usable function to erase and replace a form input value, but when I try and restore the value and colour it will return "undefined" instead of what should be there
Code:
function erase_replace_value() {
// get all of the input tags
[code]....
I'm trying to think of the best way to do this, and have it be browser-friendly (Read: Runs in IE, FF, Chrome, and optimally Safari too, but the last one isn't necessary). User selects an item in a dropdown list. Clicks the Add button. A new entry inside a DIV appears, which consists of a hidden form field, the entry name, and a Del button. When the delete button, I need it to erase that entry (and the associated hidden field) but not the whole block.
View 1 Replies View RelatedIs it possible? I'm trying to add to the current page -- but add at a
specific point. Can add HTML tags from javascript midway through the page
(at a place I specify) without erasing the existing page?
how to write a function that pulls the padding-right px value from a div.It's entered as an em, but when I inspect it in the console, I see it's calculated as px.I guess I need var pad = ?and then I need to add var pad's value to my_div's existing padding-right
View 2 Replies View RelatedI'm not sure if this is a style sheet issue or a Javascript issue.
I'm trying to work out a new design for my software's control panel.
The idea is that there are images on the left that you click and that
as you do, DIVs with option links appear and disappear on the right.
Because I want each of the DIVS to appear in the same place, I use
Javascript to set their padding and their height to 0px when they are
invisible. This is working the way I wish in Netscape 7.1 but it is
not working the way I want in IE. Can anyone give me a hint about why?
I have the following code ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
[code]....
I'll try to explain as best I can, I wasn't able to find anything relevant on this on my searches so I'm guessing it isn't a commonly needed requirement... here goes: For the design of a website I've made all H1's (and a class for any others that require this look) and sub navs have a background colour of black.
This is fine, the 'problem' comes when a line of text is longer than the space it is contained within (this bit also fine), when the line wraps, the last letter/word of the first line and first letter/word of the second line don't respect the padding applied to it's tag (h1, li, a etc.)I have a css solution but I am unable to use it due to it's infeasibility, so I am looking for a js solution.Here is an example of what I'm looking to achieve:
http:[url].....But I need to somehow detect with js the last letter of the first line and the first of the last and then use that to apply a class to each of the offending letters.
I have a function that resizes an image (imgCur) and changes its padding when a new image (img) is loaded like so: img.onload = function(){
[Code]...
Here's a sample division:
Code:
<div style="padding:0 0 0 40px; background:url(comment-icon.png) left center no-repeat;">some text</div>
I wonder how I can calculate the padding-left:40px dynamically so that any icon I choose the padding-left value changes according to the image width.
I have a couple of utility windows - a calculator and a calendar that popup
from my main window. I would like them to always stay in front of the parent
window until they are shut down with there own close buttons. As it is, when
you click back to the parent window, of course it comes in front of the
child windows. Can I do this?
So, I'm new to jQuery, but have a pretty good understanding. Still, I've come across an issue that I'm not quite sure how to resolve. I'm using wordpress, and have a .swf inside of a div, "player." The player class has no height spec, as the height of the .swf is different depending on the page. What I need to do is detect the height of the .swf on each page, and then apply that number as padding-top to another class?
View 1 Replies View RelatedI have problem with span tag padding paroblem can I do fix it with css or javascript here is code which hard coded for left and right padding I have ad and <br /> I want programatic way to fix it with css or java script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
[Code]....
I'm currently working on an IE7 CSS fix for a rather large form. Long story short, I have each input wrapped in a div, all in the same class. What I need, is to have each div define a padding-right value that is equal to the width of that div. I'm fairly new to jQuery, so I'm in need of some help with the syntax. Here's what I currently have, but it keeps printing a padding-right value of "0".
$('.form_label').each(function(){
$(this).css('padding-right', function() {
var w = $(this).width();
[code]....
the "li.sf-with-ul" class has extra padding which i can't seem to find where its coming from.[URL]..menu items with UL under them (sub items) have padding that makes the items different from the normal links. i would like to get rid of it. i can't find anything related to this in the CSS.
View 12 Replies View RelatedI found this useful script for setting equal column height for divs. But is doesn't account for the padding inside the divs. How to make it calculate the total height including the padding from the heighest column?
Code:
$('#leftcolumn, #content').equalizeHeights();
(function($){
$.fn.equalizeHeights = function(){
return this.height(
Math.max.apply(this,
$(this).map(function(i,e){
return $(e).height()
}).get()
))}
})(jQuery);
I have successfully implemented the Datepicker plugin but am having very difficult problems with the image alignment of the calender icon.
The icon seems to have no padding/margin/spacing between the input box and the image, and is also not aligned correctly.
I have viewed the documentation but can see no reference on how formatting is achieved.. I looked at jquery-ui css (redmond) and can see no reference to how this is aligned.
When I use this code....
window.open('gallery/pic1.jpg','windowname','width=775,height=550,resiz able=yes,scrollbars=yes,top=10,left=10');
....my web page displays a picture with a white border around it. Is there a
way to get rid of the white border? I want to continue to link directly to
my image (pic1.jpg) and not to an HTML page. The reason for this is because
if I link directly to an HTML page then I seem to have problems with pop-up
blockers.
how do i put a red border around an input box with a class of .input1 if it goes into this loop??
if(firstName=='' || firstName.length < 3 || firstName=='First Name:' ){
error = 'Please enter your first name';
$j('#errormsg').html('<p class="errors">'+ error +'</p>');
return false;
}
Wondered if you could let me know if I've missed something when setting up a
table.
If I use the following:
<TABLE WIDTH=500 BORDER=1>
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
</TABLE>
All 4 sides of all of 4 table cells have a border 1 pixel in depth -
perfect!
If I change this to:
<TABLE WIDTH=500 STYLE="border: 1px dashed black">
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
<TR><TD>fred</TD></TR>
</TABLE>
I only get a border on the outer 'wall' of the table - no borders on the
cells!!!
Due to the project I'm working on, I'm dynamically creating rows and cols in
DOM, I'd really like to just specify that all of the cols/rows have a border
in one go like the old table method rather than having to define the border
style for each cell.
I can't use the old table method of BORDER=1 because I need the dashed style
rather than a solid border. Any ideas on how I can do this?
I have the following problem:
An input field get a border assigned by a style class (e.g. 2px solid red).
When the field gets the focus, we set the border to green.
element.style.border = "2px solid green";
When the field looses the focus, the border should change back to red.
We just want to remove the style we have set, when the field has got the
focus, so that the style class is visible again.
element.style.border = "";
Under Firefox that works but not under IE.
We have changed to the class mode, because we don't want to save the
previous setting and restore it later.
Is there a possibility to remove the style (especially the border style)
under IE, so that the style of the assigned class is visible again?
element.style.removeAttribute doesn't seem to work, but may be I make
something wrong? Code: