I have a pretty big Intranet site at work, there are detailed work descriptions. There are links in the procedure that bring up pics, and I'm using Highslide. The default behavior is to bring the gallery up and dim the background. When you click outside the gallery it closes. Some of my users would like to keep a gallery up, on top so they can follow the procedure. As of now they keep having to bring the gallery up. I also have a pop up on a section of another page that pops up a modal with html in it(I have calculators popping up). The behaviors of these is they stay on top of the page until you close them. I'd like the same behavior for my gallery, is it possible?
A Highslide gallery/image can stay open exactly like an Highslide HTML popup. All you need to do, is removing the hs.dimmingOpacity setting for your gallery. Since I haven't seen your page, I can't tell where to find this setting in your gallery setup.
Highslide lets you define a function to run before closing. If this function returns true, it will close, if false, it will stay open. Without seeing your code this is the best response I can offer.
<script type="text/javascript">
var allowClose=false;
hs.Expander.prototype.onBeforeClose = function (sender) {
return allowClose;
}
</script>
The somewhere else you can add a button to switch allowClose to true, which will restore the basic closing functionality. There is also a close() function in highslide, so you could have a large button somewhere to call close().
The full set of properties, functions, and events is here-> http://highslide.com/ref/
Related
I'm struggling to set up a highslide gallery to work like the one here: http://www.roadrash.no/hs-support/gallery-in-page+caption-above-thumbstrip.html
However, there's a problem that the example on the page above is a popup window that is placed above everything else in a page.
I want to place the gallery inside a page, without any z-indices, absolute positions etc, so that my highslide gallery would look like here: http://www.theinsider.ua/multimedia/543ce96463688/#1
Anyway, right now it seems like there's no way to do this with highslide. Am I mistaken?
This is what's known as an "in-page gallery." See the barebones example:
http://highslide.com/examples/gallery-in-page.html
The example from RoadRash's site is also an in-page gallery. It is not a popup that floats above everything else on the page. Here's an example from RoadRash's site that has three in-page galleries on a page of ordinary HTML. There are no popups, and no modal windows:
http://www.roadrash.no/hs-support/3galleries-in-page.html
A regular Highslide JS popup looks like this:
http://highslide.com/examples/mini-gallery.html
First let me explain the problem:
On certain pages throughout the website im building, users can click a thumbnail of a video, and a modal (bootstrap) is displayed with that video inside, which is an embed link from various sites where the videos are hosted. The problem however, is that if the user clicks anywhere except Play/Pause, or inside the video, they are taken to the embeded videos website.
Is there anyway i can block this?
My goal is to have the user watch the embedded video on my site and not have them leave just for clicking the video player.
Im looking for a way (possibly with jQuery), to disable any, all links while the modal is shown. Or if there is another simpler way, id love to know. Thanks!
Since you haven't shared a snippet of your code or structure, we can only give limited suggestions. Try something like this (assuming your bootstrap modal is wrapped in a container with the id #myModal):
$('#myModal a').on('click', function(e) {
e.preventDefault();
/* your own logic to handle the click if you want */
return false;
});
This would prevent the default action on all anchor tags (navigation in this case) and you can add your own custom handler if you want to alert the user that they are about to navigate away from the website (don't return false in that case).
Update: Since it is possible for the embedded players in your scenario to have navigation links of their own, the above snippet will not work. The best you can do is that you detect the navigation and prompt the user confirming if they really want to navigate away from your site.
First set the following event handler to detect whenever the user clicks a link in the video and is about to be navigated away from the page:
window.onbeforeunload = function() {
if (window.isPlayingVideo) {
return "Are you sure you want to stop playing the video and leave the website?";
}
}
Then, whenever the user clicks the video thumbnail to open the modal player and start playing the video, set the following flag:
window.isPlayingVideo = true;
This will prompt the user confirming if they want to leave the page (the exact UI depends on the browser). Note that you still can't disable the navigation from your code. All you can do is to give the user a choice.
This is a bit weird to explain so ill do my best.
Im working on a mobile site that im trying to shape into an ios app (eventually).
On this page i have a menu button that on click, shows/hides menu.
Everything for the most part is working but, the problem is that when you click on the "back" button and the browser runs out of previous locations to go back to, the menu button breaks. When you click it, nothing happens. it behaves as though nothing is there.
The errors go like this, if on index(or first page), you click ONE link to go forward, and then on the browser hit the back button, it breaks instantly.
If your on the index, and hit for example, 5 links in any order(essentially you went forward 5xs) and thereafter, you hit back up to 4xs, the menu still works....you can essentially keep pressing links forward and be fine, hit back as far as you want and stop short one less than the total times you went forward and still be fine.
As soon as you hit the maximum backs, and theres nothing left in the history of page locations to go back to, the menu then breaks.
here is the link of this dummy site im working on (on my server)
NOTE: to test, when it loads, manually shrink the browser to about 400 width so you can see the page take effect.
EDIT** woops forgot the link
http://somdowprod.net/4testing/mobile/less1.html
and here is my code
javascript:(i left comments in there, so you can see where my logic is at...maybe im going about it wrong?)
// JavaScript Document
$(document).ready(function(){
var newHash = "";
var menuBtn = $('.leftButton');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( menuShowHide);
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
function menuShowHide(){
$('#menu').toggleClass();
// if($('#menu').css("display") == "none"){
// $('#menu').css("display","block");
// } else {
// $('#menu').css("display","none");
// }
scroll(0,0);
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
function isLoaded(){
$('#progress').remove();
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
if(newHash == ""){
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
$('#menu a').click(function(){
menuShowHide();
window.location.hash = $(this).attr('href');
return false; //doesnt let the link jump to a new page
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load(newHash, isLoaded);
//console.log(newHash);
});
//===========================//
});
Anyone have any ideas as to whats making the menu break? Thanks in advanced.
The hashchange event is known to be unpredictable with the browsers back button.
Here's what's happening. When you back all the way to the beginning, the whole less.html page is being loaded into its own 'contentHere' container, and since document.ready won't be called on this subpage, no menuButton.click handler will be assigned to the links, so clicking them will not do anything.
Although being able to use your browsers back and forward buttons on asynchronous changes would be a neat feature, I don't think people would miss it enough for you to try to hack a workaround. People are used to not being able to use the back and forward button on asynchronously loaded content. They would try it once, see that it takes them to your site's referrer, hit forward, and subconciously make a mental note to use your menu instead of the back and forward buttons.
Probably a better suggestion, however, is to get rid of the AJAX feature altogether and let the links act the way that people expect them to. Okay, so you lose the cool 'Loading' modal and you save the user a tiny bit of time, but then you aren't confusing people's expectations about your interface.
Edit: to answer your question below, instead of using load() to get static content (which is overkill), put all of the content as sections in your less.html file and hide/unhide it using the menu selections. Here are two ways to accomplish this, each with their own advantages and disadvantages:
Fix your header with CSS (including the menu) (example: lifeinthegrid.com/simple-css-fixed-header/) and then make your menu links normal anchor links with no JavaScript event handler. When you click a link in the menu, the content jumps to that section and because your header is fixed, it has the feel of being a very fast httpRequest. Advantages: minimal JavaScript, the browser's back and forward buttons will work. Disadvantages: fixed elements are a nuisance on older smartphones, the next section might sneak into the bottom of the viewport and ruin the illusion. Solution: put more space between them.
The other method is to use show()/hide() on the different content sections. So let's say you click 'about us'. All of the sections are hidden and the 'about us' content is shown. Advantages: It's not as annoying as a fixed element, you can spice it up with FadeIn()/FadeOut() or other JQuery animation effects. Disadvantages: your browsers history will not track these changes unless you do some window.location hackery.
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox
Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want