I am currently trying to get the link on this page: https://streamlineas.com/ to work. It is the button on the top right that says "Request a Demo" but it only doesn't work on the screen size smaller than 1070px (I believe this specific button only shows on screen sizes less than 1070px). I think it has something to do with the z index not working with the link. I tried switching it to position relative and it still seemed to not work for me. Does anyone have any idea why?
The link works fine if you turn javascript off. So the css is not the problem, there is an event attached somewhere that is stopping the link working.
Do you have access to the html? In the first instance try removing data-toggle="modal" data-target=".form-modal" from the link in question.
Related
Hi I am doing an assignment that recquires me to only use html and css only no javascript. Usually, with javascript this is hella easy to do but html and css only is a bit annoying. In my first page I have a link to my second but when I press the link from the first page to go onto the second page. The animation I made does not work at all and the secondary text only shows up.
I will provide photos and code to show what I mean. I dont understand what I am doing incorrectly to cause this but it is annoying.
firstpage
second page
from the first page going onto the second via clicking 'start' the second text only shows up but I need the whole thing to show up. Heres the animation part I want to show up as well. animation_part
second page html:
html
second page css
css-part1
css-part2
I am not sure if this will further show my predicament but heres the code for the first html and css pages:
For some reason it is not allowing me to post the code here so I have done my best to showcase to go around the error
GITHUB: https://github.com/TheGraeDev/ADV201
It might be possible that your required character went to the back of main background. Try changes in css to bring your panda to front. Hope it helps!
Okay Incase anyone else comes across the same issue. Change position to relative and instead of using percentage value for Top in css using px. it fixed the problem
I have this site here (using bootstrap 4.1.2):
https://secure2.convio.net/cco/site/SPageServer/?pagename=RFL_NW_QC_Impact
And for some reason the dropdown button in the top right works on mobile, and on most of desktop but screen sizes between 786px to 991px won't work, any smaller or larger and it works perfectly.
Someone else created this page so I'm trying to help fix the issue but I can't pinpoint what's causing it. Doesn't seem like a situation where z-index would need to be used because it can still be clicked it just doesn't expand.
I checked the console and fixed the errors that came up but that still didn't solve the issue. Normally it's on mobile where I have this problem because something is overlapping the button but it doesn't seem to be the problem this time.
any help would be greatly appreciated.
thanks!
Opening/closing the menu is done by two custom functions contained in a <script> tag placed in <head>, on lines 187 and 195, respectively.
Each of them has the entire body of code wrapped in a condition:
if ($(document).width() <= 768) {
...
}
Change both conditions to if ($(document).width() <= 992).
You also have another, potentially bigger problem:
On line 391, you have …</script>, ending the current script abruptly, which is a sign that code was copy/pasted from a browser source code, without properly viewing the entire source code (when viewing large chunks of code, Chrome shows the first n lines and hides the rest under …, which acts as a link to the rest of the code). I'm surprised your console isn't bleeding heavily.
The proper way to retrieve the source of a particular tag is to right-click on it in dev-tools and select "Edit as html". In the opening editor window, you can Ctrl+A, Ctrl+C to copy the entire contents of that tag.
I copy / pasted the example from http://getbootstrap.com/components/#navbar into this URL:
http://www.frostjedi.com/terra/scripts/demo/bootstrap-nav.html
...and it's not working as I'd expect.
So if you shrink the browser width past a certain point the horizontal menu gets replaced with a button that, if clicked on, shows a vertical menu. At least that's my understanding of how it's supposed to work. But in the above example that is not how it works. The button appears but nothing happens when I click on it.
Any ideas?
Have a look to the browser console (i.e. Firebug): you'll find there an exception
Error: Bootstrap's JavaScript requires jQuery
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
Was just trying to cobble a quick site together as a favour for my sister. It's based on a template she bought and I've just quickly bunged her copy/pictures in, so I'm aware the markup is far from perfect. That said, I can't see how it would be causing the following issue...
The template uses a jQuery plugin called jScrollPane to make the content sections scrollable. Sometimes however, in Chrome (v20) this doesn't work - it doesn't let you scroll all the way down.
What's really odd though, is the pattern I've found that seems to effect whether it works or not. Try the following
Go to http://mattandkate2012.co.uk in Google Chrome - click 'Ceremony' - can you scroll down far enough to see the map? I can't.
Press the reload icon, click 'Ceremony' - can you scroll down? I can't.
Select the URL in the browser URL bar, press enter - can you scroll down? I can now!
Does everyone else get the same results as above, and do you have any idea why pressing enter in the URL bar has a different effect to the reload button?
This functionality works fine in Firefox and even IE!
Thanks
Pete
From a very quick look I guess it's because the section contains an image and you aren't re-initialising jScrollPane once the image loads. See:
http://jscrollpane.kelvinluck.com/image.html
The difference between refreshing and pressing enter in the location bar is that the cached image is shown when you press enter in the location bar...
I would suggest moving the call to $('.content').jScrollPane({showArrows: true}); to inside the $(document).ready block - if you call it before the document is ready often images or other elements won't have loaded and so the height of the containers will be wrong.