I am facing a very ilogical and odd problem here.
I have defined the width, height and other properties in a seperate CSS file. Now I wan these values on the run time to manipulate them and make my application dynamic.
But when I fetch this value using jQuery, it subtracts one or two from the value.
For example, the width of an element defined in the CSS is 450px, now when I fetch it in jQuery using
$('.programeSectionBox').width();
It will give me 449px. This thing is also happening with height and margin parameters too.
Can somebody please tell me whats happening here, I am badly struct in this problem .
Thanx for all the replies. I have checked the outerWidth() solution but its not working, giving the same issue.
Actually I am creating an application for Samsung Smart TV, they are offering two resolutions 960x540 and 1280x720. For 960x540 everything is working great, but when it comes to 1280x720, the problem is occuring which I have mentioned.
In my application I am using one javascript file and two different CSS files for the two resolutions, the applications checks that on which TV resolution its working and then loads the respective CSS. I cant hardcode the values in JavaScript file because I want to keep it dynamic, if I will hardcode the values, it will obviously work for one resolution.
So if anybody have any other solution, it will be great.
Thanx
Try using outerWidth and see if that works for you:
jQuery("#myElement").outerWidth();
More on outerWidth:
http://api.jquery.com/outerWidth/
Just use parseInt to the value you get it.
After that you will get integer value then you can perform any operation on it.
console.log(parseInt('445px'));
FIDDLE
Since this is happening with several computed values (not only width/height), I would guess that your browser is zoomed. In your case it is probably zoomed out one step, since you seem to be getting lower values than the ones you set via CSS.
Try this example here: http://jsfiddle.net/zsygt/
When the browser zoom is reset to it’s default value (100%), it should print 448. But when I zoom in one step in Chrome, it prints 449.
Related
Fellow Developers,
I'm having an with some controls, it's the following one, some of them are larger than the screen:
However, if I get the width either with JS or jQuery, I get always the same value 300px.
And if you see carefully the first screen says: 406px, do you have any idea why cannot I get the proper value?
Here is the code that I showed above.
$($('.mdl-textfield__input')[0]).outerWidth()
$($('.mdl-textfield__input')[0]).width()
Also, you can access the website from here:
https://fanmixco.github.io/toastmasters-timer-material-design
Important detail, this is the iPhoneX view in Chrome.
Seems to me you are using CSS transform. Try something like
$(".mdl-textfield__input")[0].getBoundingClientRect().width
If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.
I want to figure out roughly how much a div, with some amount of content (nested divs perhaps), would take up in memory.
How would I even go about figuring this out?
Write a little javascript that creates 100, 500, 1000, etc divs depending on which option is selected. Check the memory usage of the browser before and after selecting your option and divide by the number of div's you created. Try to use really large numbers of divs to get a better average, and be sure to test on different browsers, different versions, and different platforms.
It varies per browser, but there really shouldn't be any need to know tiny details like this. Why do you need to know?
If you really want to know the internals of the browsers, (the open source ones at least) crack open the source. For a div element in Firefox, I found this file, and I bet you can find others.
Its Size..! Do this--> Make 100,1000 divs , add style all. Go to your network tab in your browser console and look at the size usage. Similarly do it for images. You will understand the difference.! At core pixel manipulation of image as CCD array is bit costly than straight forward pixel array of divs.
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)
How do I turn off the tips temporarily? I see the ability referenced on the website a couple times, and in this forum as well, but for some reason I can't find the command that turns them off. I just need to disable them for a bit, then re-enable them.
Is there a way to give a tooltip a maximum height? I have a bunch of tooltips, some of which are only one line, some are 100 lines. I'd like to have the one line tooltips pop up very small, and the large ones pop up large, with a scrollbar for the really large ones.
Thanks.
Edit: Sorry, not sure why I assumed everyone would know exactly what I was talking about.
http://plugins.learningjquery.com/cluetip/
Edit 2: I've gotten the maximum height thing working. My problem was trying to implement it using the cluetip interface. All I needed to do was specify some CSS to do the deed. Still having trouble disabling the tips, though. Seems like it should be simple, not sure why I can't figure this out!
Yes you can, take a look here: http://plugins.jquery.com/node/8405#comment-3532
it basically means to insert cluetip call into your source element's 'hover' (or anything else) event handler and evaluate a condition before calling cluetip...
You can set up a fixed height, or an 'auto' height. If you want to have that effect you should modify the plugin code itself.
EDITED AFTER YOUR COMMENT:
Clearer now, Things change a bit:
You have to set a global flag, a boolean that is set to true every time a tip is shown (you can set it in the onActivate callback) then...
You have to use the function which I've linked to, to check whether the flag is set to true, if it's not then you can show your tip, anyway...
Don't forget to set back your flag to false when the tip is closed. The best way to do it is by inserting an 'onClose' callback in the plugin code (line 352, clueTipClose()).
If all this todo stuff seems a pain in the..., well, I think it is. Take a look at SimpleTip http://craigsworks.com/projects/simpletip/ , which has everything you need.