Μετατροπη κωδικα

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
GGATZOS
Δημοσιεύσεις: 29
Εγγραφή: 04 Οκτ 2009 22:56

Μετατροπη κωδικα

Δημοσίευση από GGATZOS » 03 Σεπ 2012 14:30

ΓΕΙΑ ΣΑΣ , Ο ΠΙΟ ΚΑΤΩ ΚΩΔΙΚΑΣ ΕΜΦΑΝΙΖΕΙ ΕΝΑ ΠΑΡΑΘΥΡΟ ΤΟ ΟΠΟΙΟ ΑΝΟΙΓΕΙ ΑΥΤΟΜΑΤA , ΜΠΕΝΟΝΤΑΣ ΚΑΠΟΙΟΣ ΣΤΟ SITE ΠΟΥ ΤΟΝ EXOYME ΤΟΠΟΘΕΤΗΣΕΙ.ΓΙΑ ΝΑ ΤΟ ΚΛΕΙΣΟΥΜΕ ΟΜΩΣ ΠΡΕΠΕΙ ΝΑ ΠΑΤΗΣΟΥΜΕ ΤΟ (Χ).
ΘΑ ΗΘΕΛΑ ΑΝ ΞΕΡΕΙ ΚΑΠΟΙΟΣ ΝΑ ΜΟΥ ΚΑΝΕΙ ΚΑΠΟΙΑ ΑΛΛΑΓΗ ΣΤΟΝ ΚΩΔΙΚΑ ΕΤΣΙ ΩΣΤΕ ΝΑ ΚΛΕΙΝΕΙ ΑΥΤΟΜΑΤΑ ΜΕΤΑ ΑΠΟ ΚΑΠΟΙΑ ΔΕΥΤΕΡΟΛΕΠΤΑ . ΕΥΧΑΡΙΣΤΩ .

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/T ... border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/T ... border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/T ... ground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/T ... oading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/T ... ntrols.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jq ... '></script>
<script src="http://yourjavascript.com/11215013191/j ... "></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >΅</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?hr ... height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

WSPNH
Δημοσιεύσεις: 97
Εγγραφή: 10 Μαρ 2006 12:52
Επικοινωνία:

Μετατροπη κωδικα

Δημοσίευση από WSPNH » 04 Σεπ 2012 00:13

Το colorbox έχει close method

Κώδικας: Επιλογή όλων

$.colorbox.close&#40;&#41;
Οπότε θα το βάλουμε μέσα σε μια function την οποία θα την καλέσουμε μετά από π.χ. 2 δευτ.
Για να το κάνουμε αυτό θα χρησιμοποιήσουμε την setTimeout (γίνεται και με την setInterval).

Βέβαια πρέπει και να σταματήσουμε τον timer χρησιμοποιώντας την clearTimeout. Αυτό γίνεται καλώντας μια function closeColorBox() η οποία κλείνει το colorbox αλλά και τερματίζει τον timer...

Παρακάτω στον κώδικα το colorbox κλείνει αυτόματα μετά από 2 δευτ.::

Κώδικας: Επιλογή όλων

<style> 

/* 
ColorBox Core Style&#58; 
The following CSS is consistent between example themes and should not be altered. 
*/ 
#colorbox, #cboxOverlay, #cboxWrapper&#123;position&#58;absolute; top&#58;0; left&#58;0; z-index&#58;9999; overflow&#58;hidden;&#125; 
#cboxOverlay&#123;position&#58;fixed; width&#58;100%; height&#58;100%;&#125; 
#cboxMiddleLeft, #cboxBottomLeft&#123;clear&#58;left;&#125; 
#cboxContent&#123;position&#58;relative;&#125; 
#cboxLoadedContent&#123;overflow&#58;auto;&#125; 
#cboxTitle&#123;margin&#58;0;&#125; 
#cboxLoadingOverlay, #cboxLoadingGraphic&#123;position&#58;absolute; top&#58;0; left&#58;0; width&#58;100%;&#125; 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow&#123;cursor&#58;pointer;&#125; 
.cboxPhoto&#123;float&#58;left; margin&#58;auto; border&#58;0; display&#58;block;&#125; 
.cboxIframe&#123;width&#58;100%; height&#58;100%; display&#58;block; border&#58;0;&#125; 
/* 


User Style&#58; 
Change the following styles to modify the appearance of ColorBox. They are 
ordered & tabbed in a way that represents the nesting of the generated HTML. 
*/ 
#cboxOverlay&#123;background&#58;#000;opacity&#58;0.5 !important;&#125; 
#colorbox&#123; 
box-shadow&#58;0 0 15px rgba&#40;0,0,0,0.4&#41;; 
-moz-box-shadow&#58;0 0 15px rgba&#40;0,0,0,0.4&#41;; 
-webkit-box-shadow&#58;0 0 15px rgba&#40;0,0,0,0.4&#41;; 
&#125; 
#cboxTopLeft&#123;width&#58;14px; height&#58;14px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; no-repeat 0 0;&#125; 
#cboxTopCenter&#123;height&#58;14px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png&#41; repeat-x top left;&#125; 
#cboxTopRight&#123;width&#58;14px; height&#58;14px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; no-repeat -36px 0;&#125; 
#cboxBottomLeft&#123;width&#58;14px; height&#58;43px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; no-repeat 0 -32px;&#125; 
#cboxBottomCenter&#123;height&#58;43px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png&#41; repeat-x bottom left;&#125; 
#cboxBottomRight&#123;width&#58;14px; height&#58;43px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; no-repeat -36px -32px;&#125; 
#cboxMiddleLeft&#123;width&#58;14px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; repeat-y -175px 0;&#125; 
#cboxMiddleRight&#123;width&#58;14px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; repeat-y -211px 0;&#125; 
#cboxContent&#123;background&#58;#fff; overflow&#58;visible;&#125; 
#cboxLoadedContent&#123;margin-bottom&#58;5px;&#125; 
#cboxLoadingOverlay&#123;background&#58;url&#40;http&#58;//1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png&#41; no-repeat center center;&#125; 
#cboxLoadingGraphic&#123;background&#58;url&#40;http&#58;//1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif&#41; no-repeat center center;&#125; 
#cboxTitle&#123;position&#58;absolute; bottom&#58;-25px; left&#58;0; text-align&#58;center; width&#58;100%; font-weight&#58;bold; color&#58;#7C7C7C;&#125; 
#cboxCurrent&#123;position&#58;absolute; bottom&#58;-25px; left&#58;58px; font-weight&#58;bold; color&#58;#7C7C7C;&#125; 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow&#123;position&#58;absolute; bottom&#58;-29px; background&#58;url&#40;http&#58;//1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png&#41; no-repeat 0px 0px; width&#58;23px; height&#58;23px; text-indent&#58;-9999px;&#125; 
#cboxPrevious&#123;left&#58;0px; background-position&#58; -51px -25px;&#125; 
#cboxPrevious.hover&#123;background-position&#58;-51px 0px;&#125; 
#cboxNext&#123;left&#58;27px; background-position&#58;-75px -25px;&#125; 
#cboxNext.hover&#123;background-position&#58;-75px 0px;&#125; 
#cboxClose&#123;right&#58;0; background-position&#58;-100px -25px;&#125; 
#cboxClose.hover&#123;background-position&#58;-100px 0px;&#125; 
.cboxSlideshow_on #cboxSlideshow&#123;background-position&#58;-125px 0px; right&#58;27px;&#125; 
.cboxSlideshow_on #cboxSlideshow.hover&#123;background-position&#58;-150px 0px;&#125; 
.cboxSlideshow_off #cboxSlideshow&#123;background-position&#58;-150px -25px; right&#58;27px;&#125; 
.cboxSlideshow_off #cboxSlideshow.hover&#123;background-position&#58;-125px 0px;&#125; 
/*-----------------------------------------------------------------------------------*/ 
/* Facebook  Likebox popup For Blogger 
/*-----------------------------------------------------------------------------------*/ 
#subscribe &#123; 
font&#58; 12px/1.2 Arial,Helvetica,san-serif; color&#58;#666; 
&#125; 
#subscribe a, 
#subscribe a&#58;hover, 
#subscribe a&#58;visited &#123; 
text-decoration&#58;none; 
&#125; 
.box-title &#123; 
color&#58; #3B5998; 
font-size&#58; 20px !important; 
font-weight&#58; bold; 
margin&#58; 10px 0; 
border&#58;1px solid #ddd; 
-moz-border-radius&#58;6px; 
-webkit-border-radius&#58;6px; 
border-radius&#58;6px; 
box-shadow&#58; 5px 5px 5px #CCCCCC; 
padding&#58;10px; 
line-height&#58;25px; font-family&#58;arial !important; 
&#125; 
.box-tagline &#123; 
color&#58; #999; 
margin&#58; 0; 
text-align&#58; center; 
&#125; 
#subs-container &#123; 
padding&#58; 35px 0 30px 0; 
position&#58; relative; 
&#125; 
a&#58;link, a&#58;visited &#123; 
border&#58;none; 
&#125; 
.demo &#123; 
display&#58;none; 
&#125; 
</style> 

<script src='http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="http&#58;//yourjavascript.com/11215013191/jquery.colorbox-min.js"></script> 
<script type="text/javascript">
var timer; 
jQuery&#40;document&#41;.ready&#40;function&#40;&#41;&#123; 
if &#40;document.cookie.indexOf&#40;'visited=true'&#41; == -1&#41; &#123; 
var fifteenDays = 1000*60*60*24*30; 
var expires = new Date&#40;&#40;new Date&#40;&#41;&#41;.valueOf&#40;&#41; + fifteenDays&#41;; 
document.cookie = "visited=true;expires=" + expires.toUTCString&#40;&#41;; 
$.colorbox&#40;&#123;width&#58;"400px", inline&#58;true, href&#58;"#subscribe"&#125;&#41;; 

timer = setTimeout &#40; "closeColorBox&#40;&#41;", 2000 &#41;;

&#125; 
&#125;&#41;; 

closeColorBox=function&#40;&#41;&#123;
$.colorbox.close&#40;&#41;;
clearTimeout&#40;timer&#41;;
&#125;

</script> 
<!-- This contains the hidden content for inline calls --> 

<div style='display&#58;none'> 
<div id='subscribe' style='padding&#58;10px; background&#58;#fff;'> 
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height&#58;3px;" >΅</p></center></h3> 
<center> 

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fspiceupyourblog&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border&#58;none; overflow&#58;hidden; width&#58;300px; height&#58;258px;" allowtransparency="true"></iframe> 

</center> 
<p style=" float&#58;right; margin-right&#58;35px; font-size&#58;9px;" >Powered By | <a style=" font-size&#58;9px; color&#58;#3B78CD; text-decoration&#58;none;" href="http&#58;//www.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size&#58;9px; color&#58;#3B78CD; text-decoration&#58;none;" href="http&#58;//www.mybloggertricks.com">Blogger Widgets</a></p> 
</div> 
</div>
Ελπίζω να βοήθησα...
http://xesemesa.gr ή http://arxwn.eu όπως και να έχει http://jbaron.gr

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

Μετατροπη κωδικα

Δημοσίευση από charavge » 04 Σεπ 2012 00:25

Χρησιμοποιείς την setInterval της Javascript.

<script>
function closePopUp()
{
setInterval(function(){
document.getElementById("idTouDivPouThes").style.visibility="hidden";
},3000);
}
</script>

Στο κόκκινο βάζεις το όνομα του div που θες να κρύψεις.
Στο πράσινο βάζεις το χρόνο που θέλεις να μείνει ανοιχτό το div σου σε χιλιοστά του δευτερολέπτου. Έτσι το 1000 = 1sec.

Όταν φορτώσει το έγγραφο κάλεσε την closePopUp και θα γίνει αυτό που θες.

edit: πρόλαβε ο φίλος

GGATZOS
Δημοσιεύσεις: 29
Εγγραφή: 04 Οκτ 2009 22:56

Μετατροπη κωδικα

Δημοσίευση από GGATZOS » 04 Σεπ 2012 21:29

eyxaristo para poly ....... ola ok

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες