I have 4 div elements on the same line, each set at 25% width to fit the screen. When I click on a div it should disappear, which I have achieved using jQuery. Then, I manually set the width of each of the divs to 33%.
I can keep on doing this manually for more clicks, but is there a way the divs automatically resize them selves like this using jQuery and even continue when 2 divs are on screen so each would should be 50%?
Creating tables will solve this problem. Table columns will automatically resize when you delete one of them. You can easly make div's behave like table.
http://snook.ca/archives/html_and_css/getting_your_di
In that case, you don't need to specify fix width e.g 25, 33.. just set it to auto:
width: auto
That should do the trick for as far as i could understand your question. If that didn't help, you should include your css and html code in the question.
Related
I'm trying to recreate a menu that can resize the html page (not the browser window) to different sizes in order to "show" how the responsive code works. you can go to this page to see what i mean:
http://switcher.oklerthemes.com/?theme=Porto
I'm trying to recreate the upper menu, the one with the "device images" but i have no idea of how to do it and i can find any good information about this. does anyone have any idea?
One idea would be to wrap all of your code inside of a div with class .container, who's only job is to set the width. Then for each of the buttons, use javascript to resize the width of .container.
Here's an idea using jQuery:
$('#1').click(function(){
$('.container').css('width', '100%')
});
and a fiddle to demonstrate (notice I'm using jQuery for this): http://jsfiddle.net/md98h19c/1/
I am new to HTML and am making a simple one page website and want to add the twitter widget but when I add the widget it goes below my form. Is there a way to make it go to the right of the page as well as adjust the width of the twitter widget. The code for the webpage is below.
http://codepad.org/QcPq5Xur
Thanks in advance!
Put the form inside it's own div container.
Set a specific width to this div of the amount of space on the left you want it to take up.
Create another new div, and insert the twitter feed script inside of this.
Set a specific width if desired to set an absolute width to it, or a percentage. If you don't set a width it should fill any extra space not used by the div containing the form.
As long as the width of the two divs is less than than the width of the browser area, they will display side by side. You could also wrap the two in another div containing a minimum width if you wanted them to be forced side by side no matter browser resolution.
that's because your form is wrapped with div which is a block level element. Try altering its display to inline-block
<div id="formContainer" style='text-align: center; display: inline-block;'>
<a name="form789985197" id="formAnchor789985197"></a>
</div>
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I would need to build a html table that has a horizontally scrollable column. The scroll should be placed in the column's header.
My first question is: do you know any jQuery plug-in that is able to do this?
My second question: is this possible using a single table? I've heard that in order to do this you need to use multiple synchronized tables that look like a single one from the user's perspective.
Any idea/advice would be welcomed.
I've only seen something like this using jqGrid, but that was two tables (the master table has a second scrollable table within it). I'd like to know a plugin for this as well...
I would do as you suggested and use 2 containers. They'd both be set to overflow:scroll and have a set width, but the top one would simply contain a div that you can set to be the same width as your table. You can then bind to the "scroll" event in jquery, and set the scroll position of the divs to match each other in that event. Honestly I haven't tried this so I don't know how reliably that event fires, but in theory it should work.
Alternatively, you could do without the standard browser scrollbar and write your own scrollbar that uses javascript to set the position of your table in the overflow:scroll div. If you want draggable behavior (not just left/right arrows), it could be somewhat difficult, but wouldn't be impossible.
Is it possible to programatically access a Div's scrollbar handle and change its size?
--Edit: Is there a mootools plugin for something like this?
I'm trying to implement a lazy pagination mechanism, where a div's content will be updated onscroll, but I'd like the handle on the scrollbar to show the final size. Meaning, if there will be only 10 elements in the div, the handle will be rather large, and if there will be 1000, the handle will be as small as possible, even if the user hasn't loaded all the 1000 elements yet.
I found this site, but I want to avoid using this class.
Thanks!
You would have to use a custom solution for something like this. You won't be able to change the actual native scrollbar height. The plugin you referenced is more along the lines of the route you need to go to acheive the desired results.
Another solution you could implement would be to show the number of results via some other visual method, and not the scrollbar. If you are showing 75 of 100 elements, you could make a fixed div span 75% across the screen.
You could put an empty div inside your scrolled element, and set its height dynamically to something proportional to the actual content size.
You don't get any interface to the scrollbar itself from JavaScript, but it sounds like you can certainly get what you want simply by making the scrolled content as tall as 1000 elements. To reduce the slowness of scripting a thousand items you could replace the above-and-below-the shown-items items with a single top and bottom margin of the same height as that many items, and catch the scroll event to fill in new items to replace them.