I am currently trying to create "floating sidebars". By this I mean the social media share button you see in the link below: http://www.socialmediaexaminer.com/instagram-post-notifications-news/
I want to create something similar: a div which is fixed on the right side of the edge (so at the end of the window) and is visible all the time. If you click the div it can either expand to show additional content or it disappears.
I know how to solve this part, but the main problem is that my page is not full width (there are always spaces left on the left and right side).
I was thinking to use negative positions, but the problem is that they will only work when the width of the window does not get changed.
What would you recommend?
Related
I need to get this meny done, but the programmers say it's not possible to do what I want.
I find it hard to believe, so I'm asking you guys if this is possible.
Check out this page: http://www.nsquareit.com/lottemcgill/
Click the "Archive" in the menu below the logo. Here you can slide the three pins to make a selection to search for. The text that displays the selected value for each slider is now following the pin itself. I want that text to be static on the right side of the pins.
Is this possible?
He says the dealbreaker here is that the logo and menu itself should have fixed position. The logo and menu should not scroll with the page itself, but rather say where it is at all times. (like it is now).
So, is this possible? I believe it is. I cant see why not..?
Thanks =)
Try http://jqueryui.com/demos/slider/, it's easy to use, customizable and you can place it anywhere you want (including fixed elements)
I am building a system where users can edit content inline, however a requirement of the project is:
No Javascript!
Is there a way using just php, html and css to maintain the scrollbar position on a page refresh so when an edit button is clicked the page doesn't jump up to the top?
any suggestions?
This sounds like the perfect place for progressive enhancement. If there is no javascript, then use the named anchor tag (as Olli mentions) and a hash on the URL to get it close (but it won't be exact).
If there is javascript, then save the scroll position to a cookie or URL parameter and restore the scroll position exactly when the page reloads.
There should be no harm in offering the best experience you can without javascript, but offering a better one when javascript is available (progressive enhancement).
Another possibility is to use a paged or tabbed interface (to position the edit field near the top of the window) so it's a lot less likely that there is any scrolling when the field is edited.
Do it so:
<a name="jumphere"></a>
and when you have edited
http://yourUrlHere.com/somepage.php#jumphere
Can someone tell me how to write code that pushes the content of a finished webpage down half an inch or so, then loads an ad across the top of the page, like this example:
http://abcnews.go.com/International/hideouts-sacred-spaces-experts-baffled-mysterious-underground-chambers/story?id=14136379
(example may no longer be showing this ad/function)
The entire page loads, then gets pushed down, then the ad loads at the top of the page. My code for this would be at/near the bottom of my clients html.
The ad content will come from a different server.
The same code would ideally work with all/most finished websites instead of being specifically tailored for each one.
Thanks for any and all help.
I suppose you implement your ads in your HTML by using a static code (eg. when you're using Google Ads). When you put this code on top of your page, it'll show the ad on top of your page. Optionally, you can style it a bit so it's centered.
Since you load your ads from a different server, I don't see any reason why the HTML-code behind those ads is dynamic (I don't know if it is?). Your ad-provider will take care of showing the ads in a random-order.
If you'd looked at the source of the page you'd see this this is achieved using JavaScript, not PHP. If you want it to happen (seemingly) after the page loads you need to write some php to inculde the html/JavaScript/images whatever for the ad, then some JavaScript to dispay it once the page has finished loading. Or use AJAX to dynamically modify the DOM.
Check out the jQuery JavaScript framework.
I would prefer to use a front-end code like jquery or normal javascript, and prepend your ad to the body.
OR
If you want to do it with a server-side language. You can add the server variable just after the opening body tag, and populate the html to the variable via server-side code.
See my example:
Gray : body tag
Green : your website
Red : the ad section
If you don't have a wrapper container around your div, add one. And use the methods I mentioned above to prepend the ad to your site.
I have a web application with a split screen. On one side there is a specific functionality which is linked to the functionality on the right side of the screen.
I need to 'undock' the right side of the screen so the undocked div can be moved (even outside of the browser). This will be a functionality which users with dual screens will largely benefit from.
I managed to do this using a popup window. However, I am not liking the solution. The primary reason is that the popup window is not linked to the main application.
What I mean by not linked is that whenever I click on something from the left pane, its respective page must be popped out in this popup window. However, When I do this, the popup window is closing and opening another one (because of the same ID). This way, I cannot set a boolean variable to set it as false when the popup is closed, because it will be set to false whenever another popup is opened.
Is there a way of knowing when the popup's close button has been clicked from the parent window? That would solve me problems!
Is there a better solution of achieving this without using popup windows. I don't think its possible since when you use modals or functionalities of this sort, the modal will be a child of the parent container and therefore, is an instance in the same browser.
As a side note, this system is implementing with PHP/jQuery
Please let me know your ideas.
whenever I click on something from the
left pane, its respective page must be
popped out in this popup window
It obviously depends on your technical solution. You can handle clicks in the main window and access the DOM in your "undocked" window, so you can get the DIV too and handle it just the way you handled the DIV when it was in your original document.
I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm