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.
Related
I have used HTML5 template to build a simple web site http://glassta.com , however from past one week i am struggling with a css issue. From attached image you can see there is a gap in right hand side and bottom. Can you please help me to identify the html element creating that gap and how to fix it. Please let me know if you require any other information. Web site url - http://glassta.com
Okay, your problem is when the page loads, there is a massive height that pops up. I'm guessing it's the carousel items that's stacked underneath each other. This causes the vertical scroll bar to appear. The carousel then initializes but is taking the width of the viewport that contains the scroll bar. After the INIT the scroll bar hides and you're left with the space it took up.
I haven't used that library yet so I'm not sure how you'd go about fixing the issue. Maybe place an overflow: hidden; on the body tag.
Thank you for providing valuable clues, i looked into master slider documentation http://www.masterslider.com/doc/#quickstart and found the slider height is controlled by javascript not css.
I have modified javascript width and height to solve the problem. This javascript will in your index.php page.
slider.setup('masterslider', {
width: 1400, // slider standard width
height: 620, // slider standard height
space: 1,
layout: 'fullwidth',
loop: true,
preload: 0,
instantStartLayers: true,
autoplay: true
});
Okay, guys.
I'm about to make a forum, but my logo is only shown half.
Here is what it shows: http://i60.tinypic.com/5widdy.png
Here it´s what it's supposed to show: http://i61.tinypic.com/14ihnk9.png
I set my imageset.cfg to 'img_site_logo = logo.png*260*100', wich is the right size of the logo, and i cleaned the cache of the theme. I can't figure out whats wrong with it, so i hope you guys can help me :-) The theme i use is called 'modestus'.
First, try the following. Right click on the logo and click "inspect element" or whatever your browsers equivalent is, then a window with the page HTML and CSS should pop up, showing you exactly what CSS is being applied to it. Try checking and unchecking fields in the CSS window to test the applied style values to see if one of them is causing the problem. Highlight parent HTML elements and then do the same thing to their CSS just in case. If one of these resolves the issue, then look at the file that is being called (should look something like common.css or styles.css) and go into that file (phpbb/styles/yourstylename/thatfile.css) and search for the target element the style was being applied to to find the problem area. Comment it out with /* */ on either side of the statement and then refresh your style sheet and clear your cache from the ACP to check that it worked. You will need to refresh the page the logo appears on once you've refreshed the style and cleared the cache to see the changes sometimes.
If that doesn't work, open your image into an image editing software and verify that there is no transparent or white space on the edges of the image. If there is, crop it out and re-save.
Okay, so this is what I am trying to do with jQuery Mobile
I have a long text file. I am trying to display it on a mobile device so that it fills the entire screen. I have been trying to put the text into a div and then keep creating new divs until all of the text are in divs one following another.
"Just like you would view with an e-reader."
Of course, this has to be dynamic because of the different mobile screen sizes.
The best I can come up with is adding one character at a time until it reaches the height of the div but the often characters don't end at the left margin. They end somewhere in between.
I have tried PHP, jQuery, and plugins that use ellipses. I'm stuck. I would be happy if I could get the overflow into a new div and then that overflow into a new div and so on...
If anyone has a solution and maybe put it in a Fiddle, you would make my year!
Thanks!
I have made a small div box, just enough to contain 2 and a half line of sentence. But actually what I want to do is, I am just showing the preview (few lines of sentence ). And I want to add "read more..." at the end of the sentence, which when clicked by the user would lead to another page showing the whole article.
I am extracting these article from the database. My problem is, how to extract just a few line from the database and preview it in the small div box...?
what is the best way to do it? how should I control the amount of the text as a preview to be shown in a div box.
can it be controlled with Javascript, PhpMysql extraction code, CSS ? what is the best way ?
note:
(I am extracting article from database. As a test bed I am using the wamp server along with its mysql database)
What you can do is extract the whole text from the database, and run the following javascript on your text nodes:
Cutter.js
From their documentation:
Cutter.run( oApplyTo, oTarget, nWords, oTexts, oClasses )
You can do something like excerpt column in your database and show it in your div box and when user clicks on read more you can load full text from db. Or you can write simple js script which will be cut everything you don't need. Or you can give your div box an size via css and set overflow property to hidden:
.excerpt {
width: xx px;
height: xx px;
overflow: hidden;
}
Not the ANSWER, but some hints:
You may try ajax, to fetch the entire article & clip it using js.
Alternately, provide a server side support to provide clipped article & fetch that using ajax.
After you have got the clipped part of the article, it should be fairly easy to display it in the div, using innerHTML.
To fix the location of the div box, you can either use js or css.
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time