I've created a small javascript Rich Text Editor, but when I open it in an iframe, the padding of certain objects are not correct. Here's an image of what it looks like from the source:
But, when I put it in the iframe and use this source, it looks like this:
I tried changing the DOCTYPE and changing the margin: and padding: to 0px, but nothing changed. I can't seem to fix this. Any help would be greatly appreciated. Thank you!
As far as I can see, what's happening is that the iframe's width is not enough. From the source the colorpicker box can fill all the space it needs, but in the iframe it's cramped, shrinking everything inside it and making the color bands at the end and the gray 16, 32, 64 fall to another row. Also, the offset for the colorpicker seems to be off; are you using percentage-widths and offsets, maybe? You can do many things to solve this: just increase the width of the iframe (you can't make the box only spill out of the iframe), move the colorpicker box to the left, make the picker's size fixed (you'll need to resize the iframe or make it scrolling for this, etc. It's probably not a DOCTYPE problem, though. More details would be appreciated, but I hope this helps!
Ok. I figured out what I needed to do. I had the colorpicker div set to be at a specific .offset() with jQuery, but it didn't fully function in the iframe. The reason was because the div's width was variant on the color bit function. Because of this, jQuery had trouble determining the left positioning of the colorpicker div since the offset function I wrote uses the width of the div. So, all I needed to do was set the width of the colorpicker. ;) Thanks for the help!
Related
Edit: I had been using a custom font "Gotham" (downloaded folder of fonts in my project) in the #font-face which appears to be the source all of the bugs. Not really sure how to fix it though. Is there a way to fix these issues while keeping my custom font?
Edit #2: the issue has been fixed with ascent-override: 80%; in the font-face. But this doesn't work on Safari browsers. Is there any solution?
When I resize my browser's window height while testing my website, there is a horizontal invisible line cutting off my h1/h2 text. From my research, it seems to be something due to line-height, but im not sure.
Thoughts I had:
When I don't set a line-height for the h1/h2, their height renders to 0px and are just invisible. The p tag in the middle seems to be fine with/without line height, I don't understand why?
see below, all line height removed
When it does have a line height, the text of the h1/h2 seems to be offset of the container. When I highlight the h1 in devtools, the text is higher than the box, outside of the margins.
When I resize my window, the 'invisible line' cutting into my text seems to be in the same spot, while my text moves up and down with the page resizing. So when the invisible line is between lines of the h2/h1, the page looks normal.
I have a script animating numbers that sets the innerHTML to the next number. Maybe the use of .innerHTML is screwing something up? When the animation happens, the invisible line cuts into the numbers like so. But for some reason it fixes itself when I resize the window.
Maybe it's the font I'm using? I'm using a custom font 'Gotham' and have it set up in the #font-face in the css.
Sorry for the bad description, but I did my best. Let me know if I could clarify anything. Could someone point me in the right direction?
I can't add a comment so adding an answer, can you not use box-sizing to resolve this?
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
This should then force the h1/h2 to remain within the box rather than cutting part of it.
I have been looking around google/forums and havent really found an answer to this. I am wondering if I can, in CSS, size a div to 50% width of its contents. I see that calc() doesnt work with auto, but basically what I want to accomplish is width: calc(auto/2). Can I do this in CSS, or does it have to be done after the page is loaded in javascript/jquery?
Note:the height will be 100% with an image in it so I wont want to use px values.
Assuming that your internal content is just the image, maybe something like this:
var innerwidth = $('.parentdiv').children('img').width();
$('.parentdiv').css('width', innerwidth);
Maybe I'm misunderstanding the question, but I don't see why this wouldn't work. Hope it helps :)
Edit: I am agreeing with what the comments said - there really isn't a way to use CSS to figure out the size of a child.
I'm very new with JS, and I don't even know whether what I try to do is doable. Some guys told me "try javascript", and google can't help me because it's too specific.
Ok so, firstly I have some huge text in the center of my page. So far so good. Call it the "main text"
Then, on the side of the main text, there has to be another column containing more text blocs. But this time, these blocs have to align with the height of specific words found in the main text.
You will probably understand better with this picture :
Any idea how to do that ? thanks !
Use CSS and HTML, there is no need for JavaScript. In CSS you can use top:; to vertically align an element, e.g.
.text {
top: 40%;
}
This will align an element with class "text" 40% of the pages height from the top. Use % as your units to make the text align correctly no matter what size the window is.
You don't need JavaScript to do what you're trying to do. All you need is CSS and html.
First of all you need to take a look at basic html layout here.
Take a look at this Fiddle its something similar to what you need
Guys didn't understand you. It is really hard to find out the x/y position of the word in the div for a lot of reasons. The best way for you is to wrap the needed word with some tag (kind of span or something). Here's a jQuery plugin to do that.
Then seems you will not have troubles to find out the position of your tag for example with jquery position method and to give this position to your left column text.
my friend has designed my webpage for me, but has now gone on holiday and i only know the very basics. I want to reduce the width of my buttons on one of my pages.
I think this is the part of the coding (where it says (".betbutton) i need to change but just don't know how - hope somebody can help me - thanks
$(".betbutton").click(function(){
$("#numberofbets").html(this.attributes["nob"].value);
bet = this.attributes["bet"].value;
This is the problem with how it actually looks on my site and need the size to reduce so the buttons all shift to the left.
http://freebetoffersonline.com/bet-calc.php
Instead of giving you a fish I will teach you to fish.
First use Firefox and then install the Firebug extension. Restart Firefox.
Once you have restarted there should be a Firebug menu, open it.
Once Firebug is open click on the blue arrow icon and that will let you choose the element inspector.
Then use the element inspector to inspect the "button" elements.
Firebug has a "style" tab on the right, it will show you the styles, including the width from various CSS classes. It will also show you where the CSS style sheet is located.
Even nicer, you can CHANGE the styles including the width to test and see if the changes you think may work will actually do what you think they will.
When you look at the buttons with Chrome's Web Inspector you see that they have a dynamic width. The container, which has class name .bidlist has a fixed width of 880px. Change it to ~560px and you should be fine :-)
I'm not really sure which buttons you want to change the size of, so this answer will be rather generic.
You need to use CSS. Inside the HTML for your button put style="width:100px;" or whatever width you want. If there is already a style attribute in the button's HTML, just add the width:100px; to the style.
In style.css, line 797, there is the .bidlist width property. Reduce that to something like 580px and see them shrink :)
Your friend made the buttons 25% of the width of the bidlist container, so there would be 4 fitting in each row. If you reduce the parent container's width, they shrink, too. In the style.css file, the design of all the elements are implemented, including the container width. So that is the part you change, not somewhere in the HTML (markup).
Do you know any script which can help to achieve effect like on whis website: http://www.julianabicycles.com/
When you clik on any bike, you can see lightbox sizing effect, but most important is that it is fullscreen.
I tryed to achieve look alike effect with colorbox and similar scripts, but i cant find option for width and height 100%.
I also tryed to examine code of that website, but i consider myself newbie in js, so that's why i'm looking for your help.
Thanks in advance!
That site is using swipe.js. https://github.com/bradbirdsall/Swipe
But, colorbox has a width parameter. The 100% will be of the containing div, so make sure that is also 100%. You might want to show what you've tried.