I'm trying to access page(s) on a website. The pages are loaded via a ribbon navigation across the top of the page (which is always present), which then loads the data in a div container below.
The ribbon/navigation bar SHOULD allow me to scroll left and right - to access other links, and thus other pages - but the scroll button isn't appearing. I can overcome this problem by using Developer Tools and making the navigation bar much wider (editing the width attribute), thus revealing the links that otherwise remain hidden.
Problem: when I change the CSS to allow access to the 'hidden pages', and then click to load a new page (or new set of data, rather), the new page is loaded, and the navigation bar reverts to its shorter, original state.
Is there any way of preserving my change to the page's CSS?
This is NOT my website. I have contacted the owners, but they have not answered yet.
Related
My question is somewhat broad - I am trying to allow the user to navigate my site using their arrow keys. So, when the user presses the up arrow from the landing page, a separate screen from the top will slide into the user's view.
My current approach is to create a view for each of these different pages (landing, top, bottom, left, right), and make their positions relative and slide them to different areas of the browser using commands like left: -100% etc. I would make the overflow of the landing page hidden so the user would not be able to navigate to the other areas of the page without using the arrow keys.
However, as I am trying to move the locations of these pages, they don't seem to comply because the landing page always loads at the top left, and I cannot seem to reposition where my page lands. Is there any way for me to make it so that when the user loads my page, his view point lands at a screen that has been shifted using say the top/left commands?
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.
im nearly ready to launch my website but i have a problem i cannot sort out.
ive built the whole website using wordpress and buddypress.
due to the picture in my header being very big and ending 450px down the page, you have to scroll down to access the buddypress menu in the relevant page (the one above the activity stream etc) which is exactly where i want it, removing my header is not an option, now the only problem i am having is that when i click the tabs in the buddypress menu say from activity stream to say my messages instead of the page laoding and taking me back to this section it takes me to the very top of my header so i have to re-scroll back down to the page i was after.
I need the page to stay at the same point after page reload so that the menus can be flicked through without having to scroll down to it again everytime a link is pressed. how do i achieve this? can you please help me sort this out….i have no problems adding or editing codes if i know what code needs changing and what to add to make it do this. thx
Im guessing that if you look in the url bar it is adding a # to the end of the url. You need to override the default click event on the a tag so that it doesnt jump you to the top. Im not sure how that will affect the stuff that is going on in the BuddyPress plugin.
Am trying to display AppBar for entire html page in my Metro app.Whenever I click on the other items of the page, immediately AppBar is disappearing.Can anyone give me advice to set my AppBar remain constant for entire page in Metro App.Here am using appbar.winControl.show();.
For JavaScript: appBar.sticky = true;
For XAML: AppBar.IsSticky = true;
This will keep your AppBar on the screen even if you click elsewhere on the page. But remember that the design guidance is for a transient AppBar that will light-dismiss (disappear when you touch somewhere else). Here is the guidance for when it should be sticky, from the guidelines and checklist for app bars:
Do set the app bar's dismissal mode to sticky when displaying contextual commands.
If you have contextual commands on an app bar, set the mode to sticky while that context exists and turn off the sticky mode when the context is no longer present (such as when a photo is deselected). In sticky mode, the bar doesn't automatically hide when the user interacts with the app. This is useful for multi-select scenarios or when the context involves interaction such as manipulating cropping handles. The bar stays visible while the user performs the actions. The user can still hide the bar by swiping the top or bottom edge of the screen and they can show it again with an edge swipe.
Finally, here is the JS reference for the sticky property.
Summary:
I'd like to display a shopping cart from another domain underneath my fixed content in my page - and have the scrollbars come out properly.
Details:
I need to display a shopping cart from a vendor within a page on "my" site with "my" header on top. (Eventually the shopping will all be in a subdomain but not now, sigh.) The header is a fixed height. The shopping cart pages vary in height as you navigate within that frame.
I've tried frames and iframes and had cross-browser issues with the iframes. I'm only testing four configurations, Windows/IE, Windows/Firefox, Mac/Safari and Mac/Firefox.
Right now I am using a frameset with two frames, one containing my fixed-height header page, the other containing the external page. This does work - the one issue is that when a scrollbar appears it (of course) only appears on the bottom frame.
This will do and the client isn't very sophisticated but it bugs me.
If I use IFRAMES, I find I need to sprinkle height: 100% and overflow-y: auto in various places - and yet I still cannot avoid either one of two unacceptable issues that appear in at least one of the browser/OS combinations...
The combined content is larger than the window, but no scrollbar appears.
An inner scrollbar and an outer scrollbar both appear.
Any hints appreciated!
EDIT:
Thanks for the work - but I don't think I conveyed the issue correctly.
I'm not using frames for layout - I wish simply to make a page framing something on another site (that hosts the shopping cart and whose URL should not be exposed).
Frames "work" - BUT having an interior scrollbar on the second frame and no scrollbar on the whole page is definitely wrong behavior. My client won't know this but it'll look amateurish to people seeing the page.
I don't see quite how a server-side include or CSS would do it and I know both fairly well. If I used the server side include, how would links internal to the shopping cart work? I'd leave my site, correct?
Summary: A shopping cart hosted on another site, embedded on my content page.
Don't use frames, if the user does command + click then the product will open in new window and your frame will disappear.
One feasible solution I see here is with Javascript:
Load the page via $.ajax
redirect all clicks so that it loads in ajax window by
$('iframe a').on('click',function(){
// load the product via AJAX
});
make sure height of Div is not fixed so that it expands automatically and scrollbars are there only on window.
This is best way I could think of keeping the integration seamless while hiding the url