I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
Related
First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.
I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here
I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});
so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.
If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.
I'm looking at the new Twitter Follow Button (https://twitter.com/about/resources/followbutton), but unfortunately my sidebar is smaller than the default size, thus throwing my whole site out of whack.
Is there an easy way to hack the script to resize the button, or at least to put a line break between the actual follow button and the account name?
If you look at the page source, then your twitter code converts from
<div class="twitter">
<!-- twitter code here -->
</div>
to
<div class="twitter">
<iframe ...>...</iframe>
</div>
Now it's easy to change the width of the button via css:
.twitter iframe {
width: 80px !important;
}
I'd wrap the button in a container with a nice class name and use CSS to adjust the styling.
.twitter-button-container{
width: 100px;
height:100px;
}
Something like that.
UPDATE
On second thought, it seems that the image is a background image to the anchor tag. I don't think it's possible to resize background images using CSS etc. You'd need to have the image in an img tag.
I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:
http://i48.tinypic.com/a3o4sn.jpg
Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.
I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?
Your may be interested in this great resource: Sliding Boxes and captions
DEMO
I've recently used a jquery plugin that does something quite similar.
You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).
The plug-in is called Showcase
Its home page has more info and demo and tutorials
Finally, as an added demo, here's the site where I used it.
HTH
My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.
Markup:
<div id='container'>
<div id='slider'>Some Text</div>
</div>
Styles:
div#container {
height: 100px;
width: 100px;
overflow: hidden;
}
div#slider {
width: 100px;
height: 40px;
margin-top: 100px;
background: black;
}
And your script:
$('#container').hover (
function () {
$('#slider').css('margin-top', '60px'),
$('#slider').css('margin-top', '100px');
);
I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.