I'd like to apply a global site-wide little javascript window on the very bottom right of the site that will display a window about 40 x 80 wide, just a book icon and the word "Bible", where when a person clicks it, it will open a pop-up window, centered and pull whatever page I give it to display the bible itself (I have it internally already). These little javascript windows auto scroll as you scroll up or down the pages, you've seen them many times.
PS: I also want a "hide" option, but it doesn't hide it but minimizes it down to a small icon, all the way to the very bottom right of the site. So, click it opens, click it minimizes.
Your solution lies with jquery www.jquery.com There are (literally) thousands of scripts and you are sure to find your solution there.
Related
I have created a custom element named memory-game and I am able to create lots of them by clicking on the icon of the memory game. I want functionality so that when I click on a memory-game window, it appears on top of the other opened windows. I can't figure out how to do that.
Use z-index to control what order non-statically positioned divs appear on the page.
Aside from that, I'm not sure what you're trying to accomplish with the code you have provided.
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
Let me try and make sense. I have a search page that returns lots of search results just like Google. Each of those search results have a trigger (via an icon using onmouseover) to access more info in a popup window that pops up to the right of all the search results, just like google. Here is what I want from the popup window:
No matter if I am looking at the first search result at the top of the page, or the last search result way down at the bottom of the page, I want the popup window to align itself with the top edge of the screen, regardless of where I am vertically on the page (similar to fixed)
BUT, if the popup window happens to contain more data then the vertical screen height allows, instead of the popup window creating scrollbars internally, I want the popup window to scroll right along with everything else on the page (similar to absolute)
The problem is that fixed chops off data that goes below the bottom of the visible browser window height making it inaccesible without internal scrollbars. With absolute, the popup scrolls along with all the other stuff on the page which is great and what I want, but it always appears at the very top of the page, even when I am at the bottom of the page, making it invisible to the user if the results list is very long.
Its like I am trying to combine the two methods in a way. So to summarize:
When I trigger a popup via onmouseover, the popup window should affix itself to top edge always no matter where I am vertically, but if its content is vertically taller than the screen allows, I should be able to scroll the entire page down to see the rest of it. I should not have to use internal scrollbars within the popup window like fixed.
Is this possible and how should I go about it? Thanks!
You're going to need JavaScript.
First, make set the popup divs to position: absolute. This will act like fixed in that it can go anywhere on the page easily through left and top, but it still scrolls with the page.
On link hover, make the JS detect the browser's scroll position (through window.offsetY or $(window).scrollTop() in jQuery). Apply this offset to the popup:
$('.link').on('click', function () {
$('.preview').css('top', $(window).scrollTop());
});
Remember also to tweak the other CSS properties of the popup to suit your needs - however, most of that can be done in CSS; the only JS you really need is for the top property.
Fiddle: http://jsfiddle.net/GWvNx/
I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.
Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.
There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.
I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).
** edit **
I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.
It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that.
You can find an example here
Creating a floating box which stays within a div
So, I'm making a fairly simple on page javascript application. While it's one page, I'd like to have several pages of data. I'd like to have the entire page be a giant horizontal accordion. Clicking on the headers on either side would switch to the requisite page. I'd like to to fill the entire page so it doesn't leave empty space. Does anybody know of such a javascript library?
Thanks for your time.
Edit: I could set the width and height of a normal accordion library from the size of the window at page-load, but that doesn't adapt to page resizing very well (at all.).
Check out iridium.com, a site I worked on a while back. It's using a jQuery plug-in called "slide deck" which may suit your needs. You'd have to style it for full-page of course.
To readjust the main div per window resize:
window.onresize = function(event) { /* adjust fullscreen div here */ }
I recently worked on a fairly similar project for my personal portfolio - much like typical accordions but to prevent user confusion from the extra-tall accordion bits, the window scrolled as the giant accordion opened. check my profile if you care to take a gander