Defined clickable region while disabling links within? - javascript

I have a site where people can embed instagram videos. I have these show up as thumbnails, and I would like to have an overlay popup (containing the full size video) when they click on the thumbnail. Unfortunately, instagram's embed code comes with built in links and when clicked the video simply plays at the small size.
So my question is: How do I create an invisible overlaying region+link that will ignore the links of the underlying content? (I have the popups coded and working properly, just need to figure out how to disable the links)
Thanks!

You can put a transparent div on top of the links you want to disable and give it a higher z-index.
#links {
position: absolute;
z-index: 999; /* simulating that the target has a manually given z-index*/
}
#maskDiv{
background: rgba(255,255,255,0.6); /* keeping it partially visible to demontrate it's there*/
width: 200px;
height: 42px;
position: absolute;
top: 40px;
z-index:1000; /* needs to be higher than the target div */
}
<div id="links">
A functional link<br />
Another functional link<br />
A link masked by a div<br />
Another<br />
Last one is functional<br />
</div>
<div id="maskDiv"></div>

Related

How do I get text to appear over a div

Good morning. I am currently working on a final project for my Unix class and it trying to implement some of the stuff learnt through building a web game. One feature that I want to incorporate is the ability to add text over a div as shown in the picture. How would I go about that?
Try including some of your own source code next time, just so we get an idea of what you're having issues with.
But to put text over, try using position: relative, inside a div with a background image of what you want.
Eg.
.parent {
background-image:url("https://picsum.photos/200/300");
width: 800px;
height: 800px;
}
.text {
position: relative;
top: 20px;
left: 40px; /*edit top, left, right, and bottom to change position*/
font-weight: bold;
}
<body>
<div class="parent">
<p class="text">TEXT!</p>
</div>
</body>
If you can't use a background image, try using absolute positioning.
Here's a great tutorial for that: https://www.youtube.com/watch?v=P6UgYq3J3Qs

creating unscrollble background image using html and css only

i am trying to make a web page which background is fixed (meaning width is 100% and height does not scroll ) but the main div of the page which contain all the content of the page is scroll-able in y direction. you can see the effect here http://btemplates.com/2016/blogger-template-topgames/demo/. is it possible to achieve this effect using html and css only ? if not then how it can be done with javascript?
Yes, you can easily do that using a background image. If you inspect the page you can see how they did it.
CSS:
body {
background: url('<<Your URL Here>>'), center top no-repeat fixed;
}
content-wrapper {
width: 960px;
margin: 46px auto 0px;
padding: 0px;
}
HTML:
<body>
<content-wrapper>
</content-wrapper>
</body>
In the future, right-click the page and inspect the HTML and CSS and you should be able to figure most things out.

Load a div before other page content in WordPress

As the title says, I want to load a div in WordPress before any other content on the site. I'll explain it better: when a user loads the page, I want to show an animated intro, and then let him see the site after. How can I do that?
You'll want to create a fixed div that covers the screen to act as an overlay. Say you have a div: <div class="overlay">.
Now, in your CSS, you want to make that div take up the whole screen:
.overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
You also need to make sure your parent containers (html and body, most likely) have width/height of 100%. You might want to give your div another color so you can see it.
Also, reference this question.

Unable to get image to properly Overlay

I have an image that only appears when icon located within a pagegridview is selected. What should happen is that the overlay shows, with the full sized image on top of it. What really happens is that the overlay overlays my full sized image and off centers it. My code stands as followed:
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
.fullView{
position: absolute;
}
Javascript
Works fine to display, can't test the hiding due to overlay being on top.
$('.preview').click(function(){
$("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#<%=imgFull.ClientID%>").click(function(){
$("#<%=imgFull.ClientID%>").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
Overlay/Full Image Divs
Located right below an ASP Panel and a PageGridView
<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->
<div id="overlay"></div>
<div id="overlayContent" >
<asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
</div>
I could have sworn for the most part position:absolute css would solve the main portion, but the time crunch is on and I'm trying to do this with the flu. Any help is appreciated.
The answer was staring me in the face and I just didn't quite realize it. The #overlay# CSS was fine, however, I needed to additionally change the.fullViewtofixed` as well. Once this was done, the image hovered perfectly on top of the overlay, and I was able to utilize some CSS changes in the javascript to accurately center the image.

Limited scrolling for an Image

I'm developing a mobile website, and a full-screen image will appear as a floating-layer once the website is loaded.
Please see below........
A: My mobile website contains a lot of content which exceeds the windows height
B: After page loaded, a full-screen image appears as a floating-layer on top of the contents. The image exceeds the windows height
C: When user scroll down, he can see the lower part of the image, but not the website content. The bottom of the image should never detached from the screen bottom no matter how the user tries to scroll down
May I know how can I achieve C ??
Also, in situation B, sometimes the image may not exceed the screen height if the user is using a Smartphone with big screen, in this case, the image should be fixed at the top of the screen and not scrollable.
It would be better if all the above can be achieved by NOT using jquery. However, if it is a must, then it is still ok........
Many thanks.
While the general effect is doable with CSS only, you will probably need javascript to toggle the effect on and off.
The general idea is to use position: fixed and overflow: scroll on a layer containing the image, while the body has overflow: hidden. Under these conditions, you're able to scroll the contents of the overlay but not the body.
While this works on desktop, things are a little bit different on mobile where all of the content will be rendered despite the overflow: hidden on the body. A quick work-around is to apply position: fixed to the body as well. I don't know if this is intended behaviour, but it works fine in both Safari and Chrome on iOS.
Markup outlines:
<body class="no-scroll">
<section class="content">
/* content here */
</section>
<aside class="overlay">
<img src="img.jpg">
</aside>
</body>
CSS:
.no-scroll {
overflow: hidden;
position: fixed;
}
.overlay {
overflow-y: scroll;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: none;
}
.overlay img {
width: 100%;
height: auto;
}
.no-scroll .overlay {
display: block;
}
With this you could use javascript to toggle the class no-scroll on the body. When it's there, the overflowing content is hidden and the overlay is visible. When it's not there, the overlay is hidden.
Here's an example of the effect (without the .no-scroll class and javascript, though, just to show that it works):
Full screen
With markup/CSS visible
Edit:
In the example above, I gave the overlay a semi-transparent background and gave the image inside of it a max-width of 100%. If you want the entire screen to be filled with the image, change the max-width to a regular width.
Edit 2:
As requested, here's a jQuery function to toggle the effect.
$(".close").click(function() {
$("body").toggleClass("no-scroll");
});
Just give a <button> or whatever the class name close and it'll toggle the effect on and off.

Categories

Resources