I am having problems with making my webpage responsive. I am using a plugin called jquery-momentum-scroll. But when I give specific height for a specific resolution (using #media), it does not instantly respond to my given resolution.
For example, if I resize my browser window, it shows the previous given responsive resolution that I set for different resolution. But, after a refresh on the browser, it takes the given property and works fine. After, including the plugin this problem occurred.
I have tried this in all other browsers it gives same result.
Can anyone help me fix this?
Did you try with! !important?
You can override the height by using !important. Just try it, I hope it will be OK.
Related
This is my first website that I'm trying to build purely by code (usually use Webflow) and I can't get the navbar to work properly. I think it's a javascript problem and I really have no clue with that.
It was working for a while, and I then checked it after a lot of additions and it wasn't working.
Could anyone look over the code and see why the navbar won't open and also is visible on the right side when it is closed.
https://cyan-aeriel-49.tiiny.site
I don't want to mess about with the JS as I followed a tutorial and really don't know what I'm doing. I tried changing the right position on the .nav-items and it came up with an error.
It seems that your problem is with your media queries, for some widths of the screen, the navbar opens perfectly and for others it doesn't.
Here is a tutorial for that: https://www.w3schools.com/css/css3_mediaqueries.asp
Also I noticed lots of inline styles have been added to your elements. Try using a separate .css file with classes inside that will help organizing your css styles.
So if you use a browser JS debugger it seems that all animation for the menu (regardless of media used: desktop, tablet, etc.) is contingent on div.burger, which is only visible when the screen size is below a certain threshold
Since .burger is display: none on desktop view, none of the event listeners get attached to clickable elements, and you get nothing happening on the frontend.
I highly recommend using a browser debugger, such as FireBug to identify problems with your js
I'm working on a responsive website and I'm so frustrated with finding a solution for this one.
this is the basic structure:
I used 'vh' sizes and when ever the URL bar slides up - the page changes the sizes of the elements and kinda "jumps", which makes a bad user experience especially when reading.
I changed the size of the second part (orange) to 'em's because I thought maybe it will not "jump" so at least where there are texts this will not happen - and I was wrong. it's still happening.
What I'm trying to get to is to make the first part (in baby-blue) opened on all of the screen no matter what screen size is displaying the page (but without making it "jump").
I'm very frustrated finding a solution to responsive pages, can you please help me solve this, or help me with some reading material that will help me solve this ?
Note: I found some codes to add that should remove the URL bars from iPhones and it didn't work :I
Since you've tagged Javascript/jQuery I'd suggest assigning the height by getting the height the specific element (eg: window, document or viewport) you want. A good comparison can be found here. From the looks of it, you might want window.outerHeight which may account for what's "under" the URL bar. On my desktop, it's the only value that's different from the rest but on mobile other values may be different as well.
document.querySelectorAll(".whatever").style.height=window.outerHeight;
I'm editing some legacy code and we use CarouFredSel plugin here - http://docs.dev7studios.com/jquery-plugins/caroufredsel and so i got myself into this strange problem - in ie8 plugin items initializes in some misaligned position.
When i manually resize the window everything realigns perfectly. But i can't find any solution with javascript.
What i tried so far - $(window).resize(), $(document).resize(), then manually adjusting some elements - html or body .css('width', '99%') and so on. Nothing works yet except manual browser resizing.
I think the solution might be in the source of the plugin, but i got no such force to find it.
Okay, i finally found that this function does exactly what i've needed - carousel.trigger('updateSizes'); (when initialising a plugin you have to assign it to a variable, in my case it's carousel)
it recalculates the dimensions of carousel, strange thing that it does not trigger when i've tried all the previous options!
I've implemented the solution described in this previous post Resizing an iframe based on content and it's almost working great, but not quite.
The problem I'm getting is that sometimes it calculates the height correctly, sometimes it calculates it way too short and the content gets chopped off.
I'm looking for some suggestions as to what may cause this, because everyone else seems to have success. It seems to me that if the height is calculated incorrectly, then perhaps the calculation is happening before all the data has loaded into the iFrame from the external source. But that is a guess, and I am by no means a JS expert.
Is there something I can do to ensure that the calculation is done after the external page has finished loading?
It is pretty much impossible to get the height calculated right. I have played around with it for quite some time. One of the things I have experienced is, if you have a form inside the iframe and there are some error handling events in the form. Lets say there is a table in the form with hidden rows etc. Then when the errors appear the table gets "higher" as the rows start appearing, so the height range is now different again. Whenever there is a post back done inside the iframe one can not control the height. I have tried about every solution posted out there and could not get it calculated right. I had to estimate the "highest" height and hard code it to be that height.
I expect the issue is that you need to detect when the content in your iFrame is changing and then resize your iFrame again. In modern browsers you can use mutationObserver to do this, but it doesn't work in IE10 downwards, so you have to use failbacks to workaround this.
I wrote a small library that looks after all these issue and will keep an iFrame sized to it's content. Work's in modern browsers and IE8 upwards.
https://github.com/davidjbradshaw/iframe-resizer
I'm doing a website UI and I came across this problem in IE7.
As the image below shows, when I search a company it's not displaying properly.
It workers in all other browsers except IE7.
It should be on top (search results).
Can any one help me on this?
For reference please visit: http://piyasanet.hurriyet.com.tr/borsa/endeksler-sektorler
Thank You !
http://shareimage.org/images/1f1xf586prss0qhqrx0.png
1) sharing buttons -- try adding z-index to #hurriyet-companySearch-widget-wrap like so:
#hurriyet-companySearch-widget-wrap {
z-index: 3000;
}
2) flash chart -- set the wmode attribute to opaque (sorry I cannot figure out how the SWF file is embedded, though it worked when I changed the value using IE developer toolbar).
You need to check the z-index, to put in a higher number for the drop down (auto complete) so that it comes above other elements.
In order for z-index to work, you need to position the parent as well as the child. The parent also needs to have a z-index value. Give the parent a lower z-index than the child and you shouldn't run into any problems.