Click here to Skip to main content
15,891,633 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,
If you know about how to do something like this,
I mean how to load a javascript or jQuery popUp image onLoad (once) and how can i link it to somewhere else, please help me =(

Thanks a lot...
Posted
Comments
DaveAuld 2-Dec-11 11:30am    
What do you mean by 'link to somewhere else'?
enginbilici 2-Dec-11 12:00pm    
the example above, when you click "Tıkla beğen!" (mapped image), you will be redirected to facebook page.

This is explained with code samples in these articles included in jQuery documentation:

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial[^],
http://webcloud.se/log/Building-modal-panels-with-jQuery/[^],
http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/[^].

The feature in those code samples are different, find what you prefer. You can probably find a lot more: http://en.lmgtfy.com/?q=jQuery+modal+panel[^].

—SA
 
Share this answer
 
v2
Comments
enginbilici 2-Dec-11 11:34am    
Hi, first of all thank you for answering me. I am not good at js and jquery since in these examples you linked me is it possible to enable the whole body? I mean, in the page that i linked, all the elements of body is disabled and till you did not close from the CLOSE BUTTON(!) you cannot reach them.
Thank you...
 
Share this answer
 
Comments
enginbilici 2-Dec-11 11:52am    
Hi Uday, thanks for your help too but i have already read these =/ And they did not work as I want.
Uday P.Singh 2-Dec-11 12:51pm    
what do you want? how it should work?
enginbilici 2-Dec-11 15:11pm    
There are 3 main problems for me:
1) background must be disabled so that no one can click anything till they close the popUp
2) there must be a mapping rectangle area to link another page
3) popUp should be loaded on pageLoad(onload) not when clicking some controls

I know I wanted so many things but please help if you know the solution. The exactly same example of my want is here : www.eczacibasi.com.tr
The Head Tag
JavaScript
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
 <script type="text/javascript" language="javascript">
var expDays = 1;

function GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
            return getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

function SetCookie(name, value) {
    var argv = SetCookie.arguments;
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape(value) +
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}

function DeleteCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = GetCookie(name);
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var exp = new Date();
exp.setTime(exp.getTime() + (expDays * 24 * 60 * 60 * 1000));

function amt() {
    var count = GetCookie('count')
    if (count == null) {
        SetCookie('count', '1')
        return 1
    } else {
        var newcount = parseInt(count) + 1;
        DeleteCookie('count')
        SetCookie('count', newcount, exp)
        return count
    }
}

function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1)
        endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
    var count = GetCookie('count');
    if (count == null) {
        count = 1;
        SetCookie('count', count, exp);
        //window.open(page, "", windowprops);
        //
        popUpAc();
        //
    } else {
        count++;
        SetCookie('count', count, exp);
    }
}

window.onload = checkCount;


function popUpAc() {
    var id = "#fbAcilis";
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow", 0.8);

    var winH = $(window).height();
    var winW = $(window).width();

    $(id).css('top', 200 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);
    $(id).fadeIn(2000);

    $('.window .close').click(function (e) {
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });
}
</script>

    <script type="text/javascript" language="javascript">
        function closeWindow(id) {
            $('#mask').hide();
            $('.window').hide();
        }
    </script>
    <link href="js/style.css" rel="stylesheet" type="text/css" />



And the body tag
HTML
<div id="boxes">
    <div id="fbAcilis" class="window">
        <img src="images/aaa.png" border="" alt="" usemap="#mapLa" />
    </div>
    <map name="mapLa" id="mapLa" style="background-color: Red; z-index=1102">
        <area shape="rect" coords="620,2,645,20"  önclick="javascript:closeWindow('fbAcilis');">
            href="#" /></area>
        <area shape="rect" coords="393,55,646,156" href="http://www.google.com">
            target="_blank" title="qweqe " />
    </area></map>

    <div id="mask">
    </div>
</div>
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900