I have this issue and I don't know how to solve it...
When entering in my homepage, I want to popup a picture so as the visitors could see directly a new event before they enter the website. I tried it with JavaScript but I didn't make it to work.
I don't want to make a new homepage, but I want this picture to pop up over the normal homepage and when clicking the picture it will redirect you to the competition, otherwise by clicking anywhere else it will make the picture go away.
I know how to add the links but I am stacked in the JavaScript part.
If you could help me on how to pop up the picture when someone visit my website I would really appreciate it.
Create a div which contains your pop'in and use jQuery when the page load :
<div id="mypopup">
**** Somes stuff here ****
</div>
$(document).ready(function() {
$("#mypopup").show();
});
Have an image with position: absolute property. And place it wherever you want on screen (show it default)
Use jQuery library, to do the below stuff to hide it.
$('.image-class').click(function(e){
e.stopPropagation();
});
$('body').click(function(e){
$('.image-class').hide();
});
Related
I am trying to navigate to another HTML file without changing pages. Basically I got an emergency button, and once clicked, it should open an HTML file which pops up a box displaying 3 other buttons. This box also has an "X" to close the window, to close this HTML file and go back to the other.
Basically I want 2 html files to display at the same time. I am currently using adobe edge animate to do the process, however I am capable to use Javascript and HTML.
To give you an idea: It is similar to when visiting a website and a box pops up asking you if you want to subscribe to the news letter, or just keep searching.
Thanks
Well. what i understand of your question. You want an html page on an html page. I suggest you could use JQuery popup screen. Visit this link. https://jqueryui.com/dialog/
If you want to call another html page without refreshing your page use Jquery .load(). http://api.jquery.com/load/
$( "#div_to_load_file_in" ).load( "path/to/your/file.html" );
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/
I'm trying to figure out how to make a link on my page access a game in a certain spot on the same page. I have multipal games that are embeded>. So I have multipal links on the same page.
So Basically after I click one of the links, it will do a pop up in any area next to the link and they can play it. If someone can help me out I will give you much credit needed.
I'm using antenna web design and I'm not sure if I need to call functions so I can put the code in a certain area. Thank You For Your Time If You Help.
if you need in the same page means use
<iframe></iframe>
otherwise just make a link. it will open same window or use target="_blank" it will open for a tab
try to send the video Id in link and filter the video id from querystring on click event
Currently a lightbox is triggered when a visitor clicks a certain link on my page. However, as an introduction to new users I'd also like to show the lightbox when a visitor loads a page.
I've been looking into click events, but I can't seem to get it to work. Could somebody please point me in the right direction?
The site is located on http://wandree.websites.xs4all.nl/test, and the lightbox is currently triggered when you press the image of the tv located in the sidebar.
Thanks for any help!
Try this in the head section of the page:
$(document).ready(function(){
// Call the lightbox function.
});
At the moment I've got Colorbox setup so that it starts automatically when the page loads, but I need to place it in a div on the page, instead of hovering in the center of the page. How can I do this? Thanks for reading.
You can do insert this javascript snippet into your javascript on document complete, where you bind colorbox.
$(document).bind('cbox_complete', function(){
var divContent = $('#cboxLoadedContent').html(); // Grab the content of cboxLoadedContent div
$('#colorbox').hide(); // Hide colorbox div
$('#cboxOverlay').hide(); // Hide the overlay div
$('#Output').html(divContent); // put the content inside the specified div.
});
What this does is that after the image/page is successfully loaded into colorbox, it will immediately grab that content, hide the colorbox and overlay, and dump that content into the new div.
Yes, you will see opening and closing of colorbox flashing on your screen really quick, but this will do it. If you want more controls, then you customize these events: onOpen or onLoad. See link at bottom of my post to go to colorbox website for more details.
Beside cboxLoadedContent, you can also use #cboxWrapper, or #colorbox divs, depending on how much colorbox information you want to embed in your div.
Please note that by doing this, you will have to rebind the buttons, if you want it to allow navigation inside the div.
You can go to Colorbox Site for more customization options.
I think Colorbox is the wrong tool for what you want. The functionality you want is more like an image gallery. Some ones you might like: Galleriffic or Galleria