I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.
Related
I figured out how to use mix-blend-mode with css but I am not sure how to only turn it on after a certain point I scroll through.
You don't. CSS itself doesn't know where you are on a page at any given time, you'd need JavaScript for that. There's a pretty clean solution here using both CSS and JS which might be helpful https://css-tricks.com/styling-based-on-scroll-position/
"Use images to break up the content."
What do it means? What can I use code for that? html or css would do. Thank you.
I think this advice is telling you that the content of your page is too condensed (everything is clustered together) - or - the page you're to build should not be one big block of stuff. It sounds like they want you to add images in between blocks of content to spread things out and give space around things - to make things "flow".
Without knowing what the project is it's hard to answer a question like this.
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/
I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.