I try to make a lightbox of my own.
I use a div to cover the web page and display in that div the images, buttons etc.
This div has a semi-transparent background image to "dim" everything.
The problem is that three things cannot be dimed. (they overlap the image)
-An openlayers map (inside html5's article)
-An html5 video tag
-An html5 details tag
This happens cross-browser.
Any ideas? Has to do with html5? The place/order the tags have in the DOM or something?
Thanks in advance
EDIT
Here is the code. Hope it helps. Comes from a 2200 lines file, so its edited. Ask me if you want more specifications
<script type='text/javascript'>
//create image element to later append to lightbox div
var elem2 = document.createElement("img");
//open layers - set map...
map = new OpenLayers.Map('map_element', options);
//more openlayers things here
//image takes its source from an array came form a query
elem2.src=mpli[0];
//then, append to the light box div
document.getElementById("lightbox").appendChild(elem2);
//functions for hide/show the lightbox div
function lightboxme(){
document.getElementById("lightbox").style.display="block";
}
function unlightboxme(){
document.getElementById("lightbox").style.display="none";
}
</script>
//map's article
<article id='map_element' style='width: 900px; height: 400px;'>
</article>
//the small div that contains the image gallery - when clicked , shows the lightbox
<div id="smallbox" onClick="lightboxme();" ></div>
//the lightbox's div
<div id="lightbox" style="display:none ;" >
//lightbox's css
#lightbox {
position:fixed; /* keeps the lightbox window in the current viewport */
top:0;
left:0;
width:100%;
height:100%;
background:url(semi-transparent.gif) repeat;
text-align:center;
}
Related
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
My web app shows body background for a second then it loads the dynamic background when i route from one page to another. I am trying to remove that white flash by adding a splash screen using AngularJS. I looked at some tutorials but were not able to find exact solution.
how do i avoid showing the white body background before my div background loads?
any suggestions?
HTML
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper" ng-style="{'background': backgroundImg}" >
<div class="content-wrapper">
<section class="content">
<div ng-view></div>
</section>
</div>
</body>
my route
$routeProvider.when('/about',{
templateUrl:'partials/about.php',
controller: 'pageController'
});
My controller
app.controller("pageController",function($scope, $rootScope){
$scope.title = "About Us";
$rootScope.backgroundImg="url('http://abounde.com/uploads/images/abt-min.jpg')"; //abt bg
$scope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
});
});
From what I understand, the pb is that when you route to another page then you launch a new request to download your background with your url(...). Because this request can take time then you have your white screen.
So a solution could be to "preload" all background images when you open your app. So before displaying anything on your app you can display a "loading..." div. In background download all your backgrounds.
Once this is done, when changing route then simply change the css class of your wrapper div to the css class containing the correct background image.
On this particular page, you could have a div that wraps the entire document.
Give this div a class with css ie .document-wrapper-invisible
in your css give .display-none class a display property of none
.dislay-none {
display: none;
}
When your view content loaded function runs, remove this class. You can simply set a variable to be true and use ng-class to conditionally remove the class. ie
<div ng-class="{display-none: !documentLoaded}">
// your page content
</div>
in your controller
$rootScope.$on('$viewContentLoaded', function() {
console.log("about page loaded");
$scope.documentLoaded = true;
});
Something along these lines should work (I've only ever used rootScope for the viewContentLoaded event, if $scope works on it's own then great)
On this link I've build a simple html/css based layout. What I want to achieve the following: I want that the content section gets a overflow-y as soon the window height is smaller then the content height. The footer and header need to stay in the same position. Only the content section must be smaller.
This sounds very simple, but to my own surprise I couldn't find a solution yet. I'll tried to add some max-/min-height and overflow values to the content section, but this wouldn't work.
Would be awesome if someone could help me out. Thanks
I would use a combination of CSS and jQuery addClass() as follows (I am calling the content section #Content, let's say 600px for this post):
//css
#Content {
height:600px;
//etc.
}
.contentoverflow {
overflow-y:scroll;
}
Now on page load, add an onload function to the body (note that the Content div lacks any classes):
<body onload="checkHeight()">
<div id="Content">
<!--Your content goes here-->
</div>
Now the JavaScript / jQuery:
function checkHeight() {
var scr = screen.availHeight;
var contentHeight = 600; //or whatever number you choose)
if (contentHeight > scr) {
$("#Content").addClass("contentoverflow");
}
}
I have this link :
</td>
and I want to change the image when the user over the link I tested :
#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}
but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))
when I use the background-image without hover like that :
it doesn't appear :
#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}
NB : I generated the page with photoshop
do you have any idea
You can completely remove the img because you add the efect via CSS on the a tag.
HTML
CSS
.image_link{
display:block;
width:800px;
height:600px;
background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}
.image_link:hover {
display:block;
width:800px;
height:600px;
background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}
JSFiddle.
Note that you must add dispay:block/inline-block to the a
I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.
You should also use a self closing tag /> for your image. The tag is open the way that you posted it.
#planification
{
background: url(images_cartographie/cartographie3_03.gif)
}
#planification:hover
{
background: url(images_cartographie/new_image_goes_here.gif)
}
<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>
I'm a beginner at all this however i will do my best to explain.
I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.
I used the following code:
CSS:
.imgA1 {
position:absolute; top: 0px;
left: 0px; z-index: 1; } <br> .imgB1 {
position:absolute; top: 0px; left:
100px; z-index: 3;
}
HTML:
<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!
All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.
I hope all this makes sense.
Anyway help/advice would be fantastic.
Kind regards,
Steve
What i want to do is add a link to the "imgB1" section above...
Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.
< img class=imgB1 src="images\headings\red_heading_email.jpg">
Now clicking on the image will launch site visitors default mail client with "to" the mail address "myname#mail.com".
I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:theemail#address.com
<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me#me.com'>
<img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>
You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.
i think what you want is:
< img class=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">
with the same css. this should apply the positioning to the anchor tag, which in turn contains the image you want to overlay.
Andy
it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:
$(document).ready(function() {
$('.imgB1').each(function() {
$(this).prepend('<a href="link_to_point_to">');
});
});
Note that I've not tested it
If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:
<script type="text/javascript">
function sendEmail() {
var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
var user = "test";
var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto
var mailto_link = 'mailto:' + user + '#' + domain + '?subject='+subject;
win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
if (win && win.open &&!win.closed) win.close();
}
</script>
<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>
< img class=imgA1 src="images\headings\red_heading.jpg">
< img class=imgB1 src="images\headings\red_heading_email.jpg">
You can't have a link through a CSS class because CSS only defines DISPLAY/LAYOUT properties.
You will have to add an html anchor tag to the img.
By default, images that are hyperlinked will have a border around them (usually blue). Make sure to remove it via css or with the IMG attribute border="0"