Solved

Div Without Picture

Posted on 2014-11-11
4
122 Views
Last Modified: 2014-11-11
I have a div that opens when you click on a photo.  However I want a Div to open without a photo, just a white box.  What would I change to do this?

http://www.davidschure.com/Untitled-2.html

 jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }
 
    $(document).ready(function() {
        $("#thumbnail img").click(function(e){
 
            $("#background").css({"opacity" : "0.7"})
                            .fadeIn("slow");
 
            $("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
                       .center()
                       .fadeIn("slow");
 
            return false;
        });
 
        $(document).keypress(function(e){
            if(e.keyCode==27){
                $("#background").fadeOut("slow");
                $("#large").fadeOut("slow");
            }
        });
 
        $("#background").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });
 
        $("#large").click(function(){
            $("#background").fadeOut("slow");
            $("#large").fadeOut("slow");
        });
 
    });
</script>
<style>
img {
    border: none;
}
#thumbnail img {
    cursor: pointer;
}
#large {
    display: none;
    position: absolute;
    background: #FFFFFF;
    padding: 5px;
    z-index: 10;
    min-height: 400px;
    min-width: 600px;
    color: #336699;
}
#background{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 1;
}
</style>
</head>
<body>
<div align="center">
   <div id="thumbnail">
     <h3>Click on the image</h3>
        <a href="images/addtocartpng.png"><img src="images/addtocartpng.png" width="124" height="100" rel="OK"/></a>
     <!--p id="large"></p-->
   </div>
   <div id="large"></div>
<div id="background"></div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:DS928
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:meb_santoso
ID: 40435284
Change the following (in bold)

$(document).ready(function() {
$("#thumbnail img").click(function(e){
$("#background").css({"opacity" : "0.7"})
.fadeIn("slow");
$("#large").html("hello world")
.center()
.fadeIn("slow");
return false;
}); 

Open in new window


THIS LINE >>>> $("#large").html("hello world")

Insert whatever you want the white div to contain in that line.
0
 

Author Comment

by:DS928
ID: 40435314
I changed it.  But I am getting an error in the syntax on this line...
 $("#large").html[b]("hello world")[/b]

Open in new window

0
 
LVL 5

Accepted Solution

by:
meb_santoso earned 500 total points
ID: 40435319
my bad, you should remove the [b ] and [/b ] (apparently I can't bold a text within a code section)
0
 

Author Comment

by:DS928
ID: 40435359
LOL, I thought that looked funny!  Works perfectly!  Thank you!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 41
html coding on my Tumblr blog 1 34
Full Screen problem when auto scale IFRAME 2 64
How to loop bootstrap columns which contain database records 9 20
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now