Is there a way to make a link that will scroll the visited page, say, 600 pixels from the top or the bottom?
And I'm not thinking about scrolling to an anchor...
I want to make a link about device support for iOS and the best results are on this page: https://www.apple.com/augmented-reality/
but the part about the device support is at the same bottom and there is no proper anhora or ID tag to scroll to.
So, wouldn't it be great if I could write, for example:
href="https://www.apple.com/augmented-reality#bottom&600" or something to scroll to 600px from the bottom edge? Does anyone know if it can be done?
Maybe Chrome's feature "Scroll to text fragment" could help for this.
Just add #:~:text={text} to the url, where {text} is some text that should be highlighted and scrolled to.
In your example, this could look like this:
https://www.apple.com/augmented-reality/#:~:text=Snapchat
I don't know if this always works reliably, but it's the only way I can think of at the moment.
Edit: I just realized that the link doesn't work as expected on first try but when reloading...
Related
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels
Here is the issue I am having:
One of my webpages overflows on the x-axis, meaning I have to scroll left or right which in effect causes other issues.
I started disabling all the css stuff for that page, but I still continue to see the scroll bar at the bottom.
How do I find out which element/html code is causing this? There are literally hundreds of lines of code.
Thanks
Bruce
If you're using a WebKit-based browser, try the Web Inspector. If you're using Firefox, try using Firebug.
Regardless, either of those tools should have some way that lets you see the HTML of the page. In both of these tools, when you hover over the element in the inspector, it will highlight the element on the page. If you just move your mouse down over the elements, you might see one pop out of the confines of the page. If that doesn't find it, you could try right clicking on areas of the normally-out-of-view part and clicking Inspect Element. If you get some specific element, that might be causing the problem.
Depending on the browser you are using, there are multiple methods via an 'element inspector'. A helpful bookmarklet that I have found is XRAY. Simply enable the inspector or bookmarklet and simply highlight the designated area that you wish to inspect.