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
Related
I am having trouble getting my GoJS Diagram to scale properly initially by setting the initialAutoScale property on the Diagram object as so:
myDiagram.initialAutoScale = go.Diagram.Uniform;
however, I AM able to set the fixed auto scale value like this, although it is not the behavior I want (does not allow ctrl-scroll zoom after initialization):
myDiagram.autoScale = go.Diagram.Uniform;
Admittedly, I am controlling and managing the GoJs Diagram from an Angular controller, which I understand is not the recommended way to use GoJS with Angular. That said, I am working with a short schedule on a web application that is much bigger than the piece I am currently working on and it is the best for the project if I CAN make it work within the controller construct.
Given that, I would love a recommendation for a fix, but also would very much appreciate any feedback regarding why autoScale might've worked while initialAutoScale doesn't, how initialAutoScale works and why in particular it might be angry with my Angular controller implementation, why else initialAutoScale wouldn't be happy, or any other ideas for a workaround.
I am happy to post more code as it is helpful. Thanks for any help!
Diagram.initialAutoScale determines the scale of the diagram after the Diagram.model has been replaced. So if you have set initialAutoScale: go.Diagram.Uniform, for example, then after you have replaced the Diagram.model with a new Model, the Diagram.scale will eventually be set so that the whole Diagram.documentBounds can be seen in the viewport.
If you do not replace the diagram's model, this property has no effect.
Setting Diagram.autoScale to go.Diagram.Uniform basically results in a call to Diagram.zoomToFit whenever there is a change to the document bounds or the viewport size or scale or scrollbar visibility or any other state which affects what is shown and where.
See http://gojs.net/latest/intro/initialView.html for more discussion.
Have looked around the internet, and have not been able to find an answer to this.
I am building yet another custom image slider, but need to be able to handle arbitrary html in the div that is being animated.
Generally, this would be no problem... this certainly isn't the first slider I created, and, in general, if I require the pretty slice and dice effects, I use an empty div with the content as a background image like everyone else. If I do have to allow it to handle arbitrary html, I limit the effects, or simply fade in the html content once the slice-n-dice transition is completed.
In this case, however, I need the pretty effects AND the arbitrary HTML in the same sliders, and at the same time.
My best idea on how to do this was to convert the arbitrary HTML into an image.
I couldn't find a decent, client side solution anywhere... but eventually realized I could stuff the HTML into an SVG element, and can use SVG as a background image for the div.
(Just an FYI, this really only has to be handled by modern browsers, which can handle SVG and DATA-URLS and such)
The first part is actually kinda easy:
arbitraryHTML = "<style>div{padding:10px;border:5px solid red;border-radius:10px;width:500px;height:175px}p{text-align:justify;}img{height:50px;float:left;border-radius:5px;margin:10px;}</style><body><div><img src='steve.png'><h1>Arbitrary HTML</h1><p>This allows arbitrary HTML to be turned into an image, and the image is then able to be stuffed into a canvas. In this case, I will leave this image as an image so that I can set it as a background image of a div that will be visually sliced apart for a slider.</div></body>";
var stuff = document.createElement('svg');
stuff.innerHTML = "<foreignObject>"+arbitraryHTML+"</foreignObject>";
document.body.appendChild(stuff);
This works perfectly fine if I just want to stuff it directly into the DOM... but what I need to do is to use it as a background image for the div that I am slicing and dicing.
Since I already have the SVG code, I should be able to use it as a data uri to feed the image in.
I found an example like this on fiddle, and attempted to use this method on the code sample above to stuff the svg into the background-image...So far, I have completely failed to do so.
Example:
var i = document.createElement('div');
i.setAttribute("style","background-image:url('data:image/svg+xml,<svg>"+stuff.innerHTML+"</svg>);'");
document.body.appendChild(i);
Every time, I get the same problem; there are no errors or warnings thrown by Chrome console, but the div simply shows completely empty.
Using some methods (the code sample above, for example) the console shows the data uri in the code for the div properly, but still fails to show the background.
As part of bug testing, I had both side by side... the actual svg element (which displayed fine), and the div with the same code stuck as a background image (which would not display). Due to this, I am assuming that my problem is something about the way I am casting the svg into the data-url rather than the svg itself.
I really haven't been playing with either inline SVG or Data URL's very much before this... so it is quite possible that I am handling the data URL's or SVG improperly for the way that I am trying to use them.
Not really sure what I am doing wrong, but would really like to solve this.
Is there a better way of converting arbitrary HTML into an image that I missed?
Or is my idea of how to achieve this on the right track, but the implementation screwed up?
Any help would be greatly appreciated.
I guess Chrome still has this webkit bug. What your doing should work in Firefox or Opera 12. Note that IE9/10 doesn't support foreignObject at all, not sure about 11.
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.
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.