0

I have a HTML page which is having only the images for entire page and its using the nivo slider for sliding. I need to place the div to make some part of images as click-able one (all the sliding images having the click-able part on same place). The issue is the divs coming below the view port. So I cant able to use the top:some%; to make responsive. When The user reduce the width the nivo slider adjust the height.

But the div not coming in the right place to make clickable.

I tried max-height:100% also.

Do you have any idea how to maintain the div in same place even nivo slider adjusting the height ?

I used the following code.

<!DOCTYPE html>
<html class="no-js" lang="en">
 <head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="robots" content="index,follow">
<link href="css/global.css" rel="stylesheet" type="text/css">
<link href="css/nivo-slider.css" rel="stylesheet" type="text/css">
<link href="css/default/default.css" rel="stylesheet" type="text/css">
<title>Test</title>
  </head>
  <body>


<div id="wrapperone">
    <div id="wrappertwo">
        <div id="mailcon" class="contnetholder">&nbsp;</div>
        <div id="instacon" class="contnetholder">&nbsp;</div>
        <div id="twtrcon" class="contnetholder">&nbsp;</div>
        <div id="facebookcon" class="contnetholder">&nbsp;</div>
        <div id="contentwrapper">

            <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="images/sliderimages/slider1.jpg" data-thumb="images/sliderimages/slider1.jpg" alt="" />
                    <img src="images/sliderimages/slider2.jpg" data-thumb="images/walle.jpg" alt="" />
                    <img src="images/sliderimages/slider3.jpg" data-thumb="images/nemo.jpg" alt=""  /> 
                    <img src="images/sliderimages/slider4.jpg" data-thumb="images/nemo.jpg" alt="" />  
                </div>

            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
 <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
  <script type="text/javascript">
  function isIE () 
  {
        var myNav = navigator.userAgent.toLowerCase();
        return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
    }
    if (isIE()) {
        if (isIE () < 9) 
            {
                $("#browserbar").show();
            } 
    } 

        $(window).load(function() {
            $('#slider').nivoSlider(
            {   
                effect: 'fade',   
                pauseTime: 20000,
                animSpeed: 2500, 
                directionNav: false, 
                randomStart: true,
                controlNav: false,              
                controlNavThumbs: false,        
                pauseOnHover: false,            
                manualAdvance: false,
            });

        });
</script>

THE CSS below

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: top;
}
b, strong {
    font-weight: bold;
}
i {
    font-style: italic;
}
ol, ul {
    list-style: none outside none;
}
blockquote, q {
    quotes: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, span {
    vertical-align: baseline;
}
header, nav, section, article, aside, footer {
    display: block;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background: url("../images/bg.png") repeat scroll left top #F2F2F2;
    /*background-color:#000;*/
    color: #3E3E3E;
    font: 12px "Arial",Arial,Helvetica,sans-serif;
}
#browserbar
{
    background-color:#FF9900;
    width:100%;
    height:30px;
    color:#FFF;
    text-align:center;
    font-weight:bold;
    padding:1%;
}
#wrapperone {
    min-height: 100%;
    overflow: hidden;
}

#wrappertwo{
 /* background: url("../images/bodyContent.gif") repeat scroll 50% 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 10px #000000;
  margin: 0 auto;
  overflow: hidden; */
  width: 100%;

}
.contnetholder
{
    border:3px solid #FFF;
    position:absolute;
}

#mailcon
{
    top:795px;
    left:7%;
    width:120px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
}

#instacon
{
    top:854px;
    left:9%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}
#twtrcon
{
    top:854px;
    left:11%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}
#facebookcon
{
    top:854px;
    left:13%;
    width:23px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:20px;
}

@media all and (min-width: 980px) and (max-width: 1200px){
#mailcon
{
    top:575px;
    left:7%;
    width:90px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
}

#instacon
{
    top:620px;
    left:9%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
#twtrcon
{
    top:620px;
    left:11%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
#facebookcon
{
    top:620px;
    left:13%;
    width:17px;
    border-color:red;
    z-index:1005;
    cursor:pointer;
    height:17px;
}
}
8
  • resonsively means what? Apr 18, 2014 at 13:21
  • There is a map attribute for images... w3schools.com/Tags/tag_area.asp
    – Akxe
    Apr 18, 2014 at 13:21
  • @PratikJoshi even the browser size reduces or the image viewed in mobile the image got reduced it width and height due to nivo slider.But the div I placed maintaining it's same position.I want to place the div also in the same area where the image get reduced width and height.
    – svk
    Apr 18, 2014 at 13:22
  • @Akxe So we need to calculate co-ordinates when the browser image gets the reduced width and height ..am I right....If I am right...is there any plugins for that ??
    – svk
    Apr 18, 2014 at 13:26
  • Can you share a link to a working/testing version?
    – Shina
    Apr 18, 2014 at 14:03

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.