I have a <div> container whose size varies based on it's content.
This content is loaded dynamically via ajax while the user is interacting with page and also based on screen size (for example, resize of the window will affect the content height).
There's a sidebar which is using the affix plugin positioned at the left of my main container.
I want to check if the height of the sidebar is bigger than the content panel and based on that, set affix plugin or unset it!
I tried attrchange plugin but that's not exactly what I'm looking for because i never set an explicity attribute value to the element that I'm trying to monitor. The element height varies based on it's content which doesn't trigger any change event!!
Do I really need to be polling my element to check if there's any change on it's height?
Check this out. http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
The implemention seems to use a settimeout to watch the attribute change
Related
I am using Wordpress Betheme. When I scroll the mouse the menu bar becomes small size, but, initially the size is big. How can I fix it? I mean I want the menu bar sticky and it always remains smaller like the scrolling size. I don't want a large header. Just a small size header will always remains and there will be no effect when scrolling.
Theme Link:
http://themes.muffingroup.com/betheme/
There is a "is-sticky" class which sets the style to the header you need. Unfortunately this class is added and removed by some JavaScript of the theme.
According to the BeTheme Documentation, there should be an option to turn on and off the sticky header.
If this turns the JavaScript oft, you could manualy set the "is-sticky" class to the element with the id "Top_bar", to always have the smaller menu bar.
Alternatively, adapt the css of the "is-sticky" class and add it to your header manually as the default style for "#Top_bar" and its inner elements.
i have a question about automatically resizing childcontrols of a panel if the panel change the width or the height. I use Asp.net (vb.net). Is there an extender or a property of the panel which allows this?
Or is there another panel which has the possiblity to auto resize their controls?
Or a javascript (jquery) plugin which allows resizing. I know the jquery.ui resiziable plugin, but i don't know if the plugin allows me to resize the childrencontrols when i change the size of the main panel with textboxes for example.
So i want to set the width for my button to 100px and add it to my panel like
main_panel.controls.add(btn)
On my testpage i have two textboxes which allows me to resize the panel, the main panel with the button as his childrencontrol and another button for submiting the panelresizing.
i hope anyone understand me, my english is waste(:
There multiple solutions to your problem depending on your knowledge/requirements.
you can set a fixed size in when you add the controls to the panel
(with .NET)
you can set up flexible rules with css which automatically make the controls inside the div or even set them all the same fixed size the div will scale
you can do this with script as well, target all the elements and make them the same size
Depending on your need (eg does the user do the resizing? or is it window resizing?) I find it the easiest to set up solution 2 and then add an event listener when needed. For instance when the project requires re-sizing when the user sizes his browser window.
Just be careful though the window resize event is very "heavy" and gets triggered a lot so use it only when absolutely needed
English is not my native tongue as well so I hope I understood your question; if not just shoot :)
(try to avoid option 1, it is the least flexible and scalable)
I have a panel that is "collapsed" by setting the wrapper div's width to be a lot smaller than the width of the content. However, when I use ctrl f to search for words, my collapsed panel gets scrolled, ie. the scrollLeft attribute of the wrapper div of the collapsed panel is no longer 0. This is a problem because I don't want it to be scrolled as it messes up the UI.
Is there a way to prevent search from automatically scrolling stuff in my collapsed panel? Some sort of event I can latch on to (focus?) so that I can reset scrollLeft to 0 whenever the browser's search is activating, or CSS I can set?
I am not using jQuery so anything jQuery related is not an option.
This is default functionality of any browser and functionality that users expect, removing this or preventing it would give developers the ability to seriously alter user experience and is generally not possible, nor a good idea.
That being said, the first suggestions I have are the following
1) set the CSS display of the object or its contents to None after fully collapsed.
2) remove the content when collapsed and store it in memory to inject back in upon opening of collapsed content.
3) upon the open of a collapsed element, set the scrollLeft to 0.
Have you tried overflow:hidden on the div?
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter
For some reason, I cannot get jQuery to give me reliable width data for various elements. Here is a link to a fiddle that demonstrates the problem:
http://jsfiddle.net/snoopydaniels/ZDbaa/1/
I am attempting to create a multidimensional drop down menu. As you can see in the jsfiddle, the second nested menu is not positioned correctly. The jQuery that I employ to position it queries the sibling anchor element using outerWidth() to discover its width, then sest the left position of the nested list according to the returned width. When I give the sibling anchor element a set width in CSS then I get something near the correct value, but without that static width, outerWidth() returns "2."
But even when I give anchor elements a set width, outerWidth(true) still does not correctly incorporate the border of the element.
I'm about to pull my hair out. Why can't crap like this just work as advertised?
The various width commands don't work for hidden elements (display: none).
If you use css to set a width, jquery will return that. Otherwise you'll get no, or meaningless, results.
The classic solution is to position the element off the screen, check the width, then hide it and put it back. (You can probably find a jquery plugin that will do that in one command.)
Sometimes there are ways of restructuring the html and/or css so you avoid this.
Sometimes you can fix the size right after showing the element.
You can also try setting the visibility to hidden, so the element gets a size, but is invisible. Depending on the your design this might work.
I had a similar issue in receiving what appeared to be random results when calling jQuery width functions. When the browser was refreshed, I would get the correct answer about 50 percent of the time.
I made the mistake of immediately checking the width of the div within the $(document).ready() function. When I changed to calling outerWidth() within $(window).load(), the correct answer was always returned.
You need to call $(window).trigger('resize') which will trigger a fake window resize event.
Afterwards, the outerWidth should have the proper value.
Make sure that you are triggering the fake window resize event once your data is populated.
In other words, if you are checking the width of a <td> inside a <th> for example, make sure the table is populated and all the resizing is done before triggering the fake resize event and checking the outerWidth.
This is a workaround due to the limitations mentioned by Ariel in https://stackoverflow.com/a/12085210/774630
outherWidth() can return invalid data if the element has negative margin on itself