So I have this carousel from http://kenwheeler.github.io/slick/. I decided with my carousel that once you click the image-a video appears. Well I want this video to load into a Modal Image-with a closeout function. The first line of code for div id....is the image onced clicked the video appears. The rest below it I'll just copy and paste the first part. (Repeat of the same image/video four times-until I decide to switch things out)
<section class="center slider">
<div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
</section>
I have the JS and CSS all working fine I just can't implant a function where you click the image the "image(video)" will open in a new window. Sorry about my wording. I am beginner and learning as I go. I know what I want it to do but can't figure out how.
Please let me know if I need to provide anything further.
I think the term you're looking for that might help you in Googling would be that you want your video to open in a lightbox.
Answering specifically how to do this in your particular circumstance is too broad for this site, even if you give us more code to look at. But generally the way you can accomplish this is to use JavaScript to toggle a class on one or more elements when your slideshow images are clicked, and adding that class would trigger the video to show up, while clicking the exit button would remove the class so things go back to their original appearance.
Here is a really basic example, but you can basically take this concept and make it as simple or complicated as you want. You could, for example, toggle a class on the html or body tag of your page and then adjust the CSS of a bunch of stuff on the page based on whether that class is applied.
If you're using jQuery, there are plugins designed exactly for this purpose that will automatically give you a ton of settings to do things like automatically size and perfectly center your lightbox in the viewport and take care of mobile functionality and whatnot. Fancybox and Colorbox are a couple examples.
var lightboxImg = document.getElementsByTagName('img')[0];
lightboxImg.addEventListener('click', function(){
this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
lightboxImg.parentNode.classList.toggle('lightbox');
});
/* relevant stuff */
#iframe {
display: none;
position: absolute;
top: -100px;
left: -100px;
}
#exit {
position: absolute;
top: 10px;
right: -290px;
padding: 5px;
background-color: white;
}
section div.lightbox #iframe {
display: block;
}
img:hover, #exit:hover {
cursor: pointer;
}
/* just for display purposes */
html, body {
height: 100%;
}
section {
width: 400px;
height: 300px;
background-color: gold;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 150px);
}
section div {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 200px;
}
<section class="center slider">
<div>
<img src="http://placehold.it/300x200?text=click%20me">
<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
</div>
</section>
Related
I haven't found much out there specifically relating to Angular, but is there a way to grey out/disable the screen on a button click? Right now I have a button which is tied to saving some data, but I need to show a loading icon and not allow the user to edit any other fields while the save is in progress.
I currently have it set to where I can show the loading icon fine on the screen, I'm just wondering what I need to do so that the user isn't able to edit the DOM.
Right now I just have a spinner that is tied to an *ngIf, which displays towards the top of my page.
HTML:
<div id="nav">
<button type="submit"
class="btn btn-primary"
style="height: 46px;
width: 188px;
margin: 0 auto;
display:block;"
(click)="saveHandler()">
Save & Calculate
</button>
</div>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-spinner" style="margin-top: 20px; display:block">
</div>
</span>
What I ended up doing was simply adding a new CSS ID tag to the root CSS file (styles.css). This way I'm able to reference the ID tag from anywhere in my application in order to apply this to anything within my project.
I drive the toggling of the CSS element with a variable, this way I'm able to execute logic in order to toggle the grey/disable. The grey/disablement starts out on a button click, and ends when the save has completed from the database. The user is unable to edit any field on screen and is forced to wait for the completion of the save before modifying any more fields.
Here's the documentation that helped me achieve this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_overlay
Here's what I added to styles.css at the root project level:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
Here's my HTML of my component where I applied the styling (I added this right at the bottom of my HTML file):
<div id="overlay">
<span id="nav" *ngIf="saveInProgress">
<div class="spinner" style="display: block; position: fixed">
</div>
</span>
<span id="nav" *ngIf="saveInProgress">
<div class="submit-message" style="display: block; color: #FFFFFF; position: fixed; left: 49.7%; top: 54.5%;">
Saving...
</div>
</span>
</div>
Here's my logic in the corresponding TS component:
save(): Observable<any> {
if(...) {
this.saveInProgress = true;
document.getElementById("overlay").style.display = "block";
}
....some more logic....
if(...){
this.saveInProgress = false;
document.getElementById("overlay").style.display = "none";
}
}
You can add the following css property to #nav (use div instead of span). This should work, as it will create an overlay over your website content so that the content is not accessible:
#nav {
background: #e9e9e9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
Also, It would be very helpful if you provide a working example on a website like jsfiddle, stackblitz etc so that we can have a look at what it is you're trying to accomplish.
Update:
Also, give this div an 'id' other than 'nav' so that the css does not conflict between your content and overlay.
// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.
I am using this code http://cssdeck.com/labs/pa0yqlki that displays a canvas covering the size of the browser's window.
I am able to display content on top of the canvas (by using absolute positioning and z-index: -1)
What I am not able to do is add content AFTER the canvas.
Once the canvas ends, and so does the window, I want to have an <h1> lets say. So a scroll bar should appear when the page is loaded I should be able to scroll a bit more so that I see the <h1>.
Any ideas?
Okay, thanks to markE's reply I was able to achieve what I wanted.
[...] <canvas> </canvas>
<h1 id="myText"> Text </h1> [...]
this is the part of my HTML. The "myText" will be displayed under the canvas based on the size of the window.
To achieve that I added the following code in the CSS.
#myText
{
padding-top: 100vh;
}
You can achieve this with playing with CSS positions;
Try something like this:
<div>
<canvas width="300" height="200" class="custom-canvas" />
<div class="text">
<div class="main">20 %</div>
<div class="head">Completed</div>
</div>
</div>
SCSS:
.custom-canvas{
position: relative;
clear: both;
width: 450px;
height: 200px;
}
.custom-canvas {
.text {
bottom: 13px;
position: absolute;
left: 6px;
right: 0;
text-align: center;
}
.head {
margin-top: 14px;
}
}
Play with left,right,top and bottom to achieve the exact position.
The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.
so I wanted an animated footer for my webpage using jquery. There's supposed to be a button which should trigger the animation. I found a nice example for all this, and everything is fine and dandy. Except that the button (including the footer) has this code that makes it stick to the bottom of your web browser, rather than to the bottom of the page. I do [i]not[/i] want it to, like, "scroll" along with the page, I realy want it to be underneath all my other divs. I tried putting it in the div container (which has all my other divs in it as well), but that doesn't seem to work.
Now, (after 2.5 hours of googling) I found out that it might/may/could have something to do with "absolute" positioning in the CSS, so I tried switching some things around such as giving the footer's container a relative position or giving it an "overflow: hidden;" along with the rest a left float but nothing seemed to solve my problem. (I could've done something wrong, not that great with CSS after all :-/)
I hope someone is able/willing to help.
P.S. Here's the example I used:
http://return-true.com/2010/04/jquery-pop-up-footer-version-2/
and here's the code:
Javascript:
jQuery(function($) {
var open = false;
$('#footerSlideButton').click(function () {
if(open === false) {
$('#footerSlideContent').animate({ height: '300px' });
$(this).css('backgroundPosition', 'bottom left');
open = true;
} else {
$('#footerSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
HTML:
<div id="footerPlacement">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent">
<div id="footerSlideText">
<h3>Hey! I'm a Sliding Footer</h3>
<p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
<p>What can you use me for? Well look at all this stuff:</p>
<ul>
<li>Sales information</li>
<li>Important updates</li>
<li>Unobtrusive about panel</li>
<li>Or just a good ol' footer</li>
</ul>
<p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
</div>
</div>
</div>
</div>
CSS:
#footerPlacement {
margin-bottom: 0px;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#footerSlideContainer {
position: fixed;
margin-left: 0px;
bottom:0px;
width: 1000px;
}
#footerSlideButton {
background: url('../images/footer/footerbtn.png') top left no-repeat transparent;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 10px;
background: #251b15;
color: #CCCCCC;
font-size: 0.8em;
border: none;
font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideText {
padding: 15px 10px 25px 25px;
}
Thanks in advance!
if you change your #footerPlacement to include position:relative, you can change #footerSlideContainer to be position:absolute and then your footer will sit below any content above it.
However you will need to make the content have a min-height of around 350px for the footer to work properly and if your content isn't long enough, the footer won't be at the bottom of the browser.
I also added overflow:hidden to #footerSlideContent. I have made a fiddle to demonstrate:
http://jsfiddle.net/tc6b8/