Javascript power!

djsolid · Post by **djsolid** » Fri Jul 18, 2008 8:23 pm

Αν δεν σου αρέσει το smooth gallery που σου είχα πει σε άλλο thread τότε κοίταξε αυτό

http://www.electricprism.com/aeron/slideshow/

proskopos · Post by **proskopos** » Fri Jul 18, 2008 8:28 pm

djsolid wrote:Αν δεν σου αρέσει το smooth gallery που σου είχα πει σε άλλο thread τότε κοίταξε αυτό

http://www.electricprism.com/aeron/slideshow/

Μα μου αρεσει, και μάλιστα το εφτιαξα όπως το ήθελα... Το θέμα είναι ότι αυτό μου ζητάει ενεργοποίηση active X...

cyberpython · Post by **cyberpython** » Fri Jul 18, 2008 8:39 pm

Αυτό που ήθελες σε Javascript (ανοίγει όποια σελίδα θέλεις, απλά δινεις το url, και το μέγεθος του παραθύρου και το που θα εμφανιστεί στη σελίδα):

<script type="text/javascript">
function openUrl(myUrl,w,h,x,y){
mynewwindow= window.open(myUrl,"_blank","location=1,status=1,scrollbars=1,width="+w+",height="+h);
mynewwindow.moveTo(x,y);
}
</script>

Για το smooth gallery, δοκίμασε αυτό που σου έγραψα στο άλλο thread και βλέπουμε.

Edit: Ξέχασα να πω πως θα καλέσεις το script για να εμφανίζεται με το που μπαίνει κάποιος στη σελίδα. Στο body tag :
<body onload="javascript:openUrl('sample.html',640,480,100,100);">

Michelle · Post by **Michelle** » Sat Jul 19, 2008 7:02 am

cyberpython wrote: Edit: Ξέχασα να πω πως θα καλέσεις το script για να εμφανίζεται με το που μπαίνει κάποιος στη σελίδα. Στο body tag :
<body onload="javascript:openUrl('sample.html',640,480,100,100);">

Το separation of presentation and behavior επιτάσσει να μην έχουμε event handlers έτσι χύμα μέσα στην html. Το ίδιο θα μπορούσε να επιτχευχθεί γράφοντας ΜΟΝΟ μέσα στα script tags window.onload = function() { /* εδώ αυτό που θές να κάνει */ }

Ακόμη και αυτό δεν θεωρείται και πολύ καλή πρακτική, διότι αν υπάρχει άλλος onload event handler τον ακυρώνει (και συνήθως έτοιμα scripts σαν αυτά που αναφέρετε έχουν), οπότε μια καλύτερη λύση είναι τα advanced event registration models, για τα οποία μπορείτε να διαβάσετε εδώ: http://www.quirksmode.org/js/events_advanced.html

Όσο για τα ActiveX, είναι αδύνατον να χρησιμοποιήσεις AJAX χωρίς ActiveX σε Internet Explorer 6, οπότε θεώρησα ότι γι'αυτό το ήθελε.

~~Wind~~ · Post by **~~Wind~~** » Sat Jul 19, 2008 12:55 pm

Michelle wrote:
cyberpython wrote: Όσο για τα ActiveX, είναι αδύνατον να χρησιμοποιήσεις AJAX χωρίς ActiveX σε Internet Explorer 6, οπότε θεώρησα ότι γι'αυτό το ήθελε.

6

!? Δεν εχει βγει και 8 τωρα ?

Michelle · Post by **Michelle** » Sat Jul 19, 2008 1:06 pm

~~Wind~~ wrote:
Michelle wrote:
cyberpython wrote: Όσο για τα ActiveX, είναι αδύνατον να χρησιμοποιήσεις AJAX χωρίς ActiveX σε Internet Explorer 6, οπότε θεώρησα ότι γι'αυτό το ήθελε.
6 !? Δεν εχει βγει και 8 τωρα ?

Θα εκπλαγείς από το πόσοι χρησιμοποιούν ακόμα ΙΕ6...

cyberpython · Post by **cyberpython** » Sat Jul 19, 2008 6:35 pm

Thanks για την παρατήρηση Michelle!
Οπότε το script θα γίνει:

Code: Select all

<script type="text/javascript">

    function openUrl(myUrl,w,h,x,y){
        mynewwindow= window.open(myUrl,"_blank","location=1,status=1,scrollbars=1,width="+w+",height="+h);
        mynewwindow.moveTo(x,y);
    }

    document.addEventListener('load', openUrl('sample.html',320,600, 100, 100),false);

</script>

Όταν όμως υπάρχει pop-up blocker (όπως π.χ. στο Firefox που όμως σε ρωτά αν θέλεις να δεις το popup window, ενώ άλλες εφαρμογές τα μπλοκάρουν όλα χωρίς να ρωτάνε) θα κρύψει το παράθυρο.

Michelle · Post by **Michelle** » Sat Jul 19, 2008 6:47 pm

Όχι μόνο addEventListener! Αν διάβασες το link, ο IE χρησιμοποιεί δικό του event registration model, και όχι του W3C. Οπότε σε ΙΕ θα χρησιμοποιήσεις attachEvent (χρησιμοποιώντας object detection για να δεις τι υπάρχει διαθέσιμο. ΠΟΤΕ browser detection!!!). Προσοχή: Η attachEvent δέχεται διαφορετικό πλήθος παραμέτρων (2 αντί για 3).

Επίσης, για να λύσεις το πρόβλημα με το popup, μία λύση είναι να το βάλεις στον onlick event handler του window, οπότε δεν θα το κόβουν τα popup blockers. Το κακό είναι ότι τότε δεν θα βγαίνει μόλις φορτώνει το παράθυρο αλλά όταν ο χρήστης κάνει κάπου (οπουδήποτε) κλικ στη σελίδα.

Μια άλλη λύση που μου ήρθε τώρα και δεν έχω ιδέα αν θα δουλέψει είναι να χρησιμοποιήσεις στο onload του window μια setTimeout και να βάλεις να βγει το popup μετά από μισό δευτερόλεπτο πχ. Δεν ξέρω όμως αν θα δουλέψει.

Επίσης δεν μπορείς να βάλεις έτσι τη function στο addEventHandler/attachEvent! Μπαίνει μια αναφορά προς αυτήν, δηλαδή ΧΩΡΙΣ ΠΑΡΑΜΕΤΡΟΥΣ. Οπότε έιτε θα γράψεις τη function έτσι ώστε να μην δέχεται παραμέτρους, είτε θα χρησιμοποιήσεις μια anonymous function που θα την καλεί με τις παραμέτρους που θες. Αν ακολουθήσεις την πρώτη λύση, έχε υπόψιν ότι πάντα περνιέται ως πρώτη παράμετρος το event object σε browsers != IE (αυτό μπορεί να αποτελέσει πρόβλημα αν έχεις σκοπό να καλείς τη function χωρίς παραμέτρους μέσω του event και με παραμέτρους από κάποιο άλλο σημείο του script, κάτι που μου έχει τύχει).

Ελπίζω να μην σε μπέρδεψα. Ναι I know, ο "μοντέρνος" τρόπος είναι πιο δύσκολος (αλλά θεωρείται πιο σωστός). :/

cyberpython · Post by **cyberpython** » Sat Jul 19, 2008 9:31 pm

ΟΚ!
Αν και σε firefox δουλεύει μια χαρά όπως το έγραψα (το δοκίμασα πριν κάνω το post το απόγευμα).

Michelle · Post by **Michelle** » Sat Jul 19, 2008 9:33 pm

cyberpython wrote:ΟΚ!
Αν και σε firefox δουλεύει μια χαρά όπως το έγραψα (το δοκίμασα πριν κάνω το post το απόγευμα).

Περίεργο!

proskopos · Post by **proskopos** » Tue Jan 20, 2009 3:23 pm

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script> 
<script type="text/javascript" src="mmenudom.js"></script>
<noscript><a href=http://www.milonic.com/>JavaScript DHTML menu is only visible when JavaScript is enabled</a></noscript>
<!-- The next file contains your menu data, links and menu structure etc -->
 
<script type="text/javascript" src="menu_data.js"></script>

Στον παραπάνω κώδικα μου εμφανίζει το μήνυμα

JavaScript DHTML menu is only visible when JavaScript is enabled

Γιατί...? Τι να κάνω...?

Post by **Ισοβίτης** » Tue Jan 20, 2009 4:15 pm

Σου εμφανίζεται το μήνυμα που υπάρχει μέσα στο tag <noscript>, οπότε λογικά ο browser που χρησιμοποιείς έχει απενεργοποιημένη τη JavaScript.

Στο Firefox πηγαίνεις Tools -> Options -> Content και τσεκάρεις το "Enable JavaScript".

proskopos · Post by **proskopos** » Tue Jan 20, 2009 4:25 pm

Ισοβίτης wrote:Σου εμφανίζεται το μήνυμα που υπάρχει μέσα στο tag <noscript>, οπότε λογικά ο browser που χρησιμοποιείς έχει απενεργοποιημένη τη JavaScript.

Στο Firefox πηγαίνεις Tools -> Options -> Content και τσεκάρεις το "Enable JavaScript".

Δεν είναι αυτό.. Εϊναι ενεργοποιημένα κανονικά...
Μήπως φταίει ότι το js το βάζω σε ένα κομμάτι που ορίζεται απο css...??? Το css που λέω είναι το:

Spoiler: εμφάνιση/απόκρυψη: [code]html {background:#53533a;} body {margin:0; font-size:14px; line-height:20px; font-family:Arial, Helvetica, sans-serif; background:url(images/body_bckg.jpg) repeat-y center;} .brown {color:#936307;} a {color:#936307; text-decoration:none;} a:hover {color:#666666;} blockquote {color:#666666; border-left:2px solid #936307; padding-left:20px; margin:10px 0 10px 40px;} #all {background:url(images/container_bckg.jpg) no-repeat top center;} #container {width:1000px; margin:0 auto; background:url(images/container_bckg.jpg) no-repeat top center;} #logo {height:50px; margin:0 60px; padding:80px 0 0 85px; background:url(images/logo.gif) no-repeat 32px 70px;} #logo a {text-decoration:none; font-size:20px; color:#000000; font-family:"Times New Roman", Times, serif; text-transform:capitalize;} #menu {height:40px; margin:0 60px;} #menu ul {margin:0; padding:0;} #menu ul li {display:inline-block; float:left; list-style:none; text-align:center; color:#936307;} #menu a {padding:0 20px; font-family:"Times New Roman", Times, serif; font-size:20px; text-transform:lowercase; text-decoration:none; color:#936307;} #menu a:hover {color:#666666;} #main {background:url(images/main_bottom.jpg) bottom center no-repeat; float:left; margin:0 60px;} #text {margin:0 270px 0 20px;} #text ul {padding:0; margin:10px 0 10px 40px;} #text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0 7px;} #text p {margin:10px 0;} #sidebar {float:right; width:180px; padding:0 40px 0 10px;} h1, h2 {font-family:"Times New Roman", Times, serif; margin:20px 0 0 0; font-size:1.8em;} #footer {height:130px; clear:both; background:url(images/footer_bckg.jpg) no-repeat center #53533B; font-family:"Times New Roman", Times, serif; color:#666666; font-size:10px; text-transform:uppercase; padding:0 60px;} #left_footer {float:left; padding:30px 0 0 20px;} #right_footer {float:right; padding:30px 20px 0 0;}[/code]

και στο σαιτ το βάζω στο σημείο...:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="all">
 <div id="container">
	<!-- header -->
    <div id="logo">.....</div>
    <div id="menu">
     
<script type="text/javascript" src="milonic_src.js"></script> 
<script type="text/javascript" src="mmenudom.js"></script> 
<noscript><a href=http://www.milonic.com/>JavaScript DHTML menu is only visible when JavaScript is enabled</a></noscript>
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="menu_data.js"></script>

      </div>
    <!--end header -->
    <!-- main -->
............................
</body>
</html>

Michelle · Post by **Michelle** » Tue Jan 20, 2009 4:30 pm

H HTML σου είναι invalid.
Με τόσο invalid HTML δεν είναι να απορείς για όλων των ειδών τα προβλήματα.

Όσον αφορά το γιατί είναι invalid, πήγαινε στο http://validator.w3.org/

proskopos · Post by **proskopos** » Tue Jan 20, 2009 4:35 pm

Michelle wrote:H HTML σου είναι invalid.
Με τόσο invalid HTML δεν είναι να απορείς για όλων των ειδών τα προβλήματα.

Όσον αφορά το γιατί είναι invalid, πήγαινε στο http://validator.w3.org/

Αυτό το html είναι από τα free templates... Πως είναι invalid λοιπόν...? Eγώ δεν άλλαξα κάτι παρα μόνο έβαλα το κομμάτι

Code: Select all

<script type="text/javascript" src="milonic_src.js"></script> 
<script type="text/javascript" src="mmenudom.js"></script> 
<noscript><a href=http://www.milonic.com/>JavaScript DHTML menu is only visible when JavaScript is enabled</a></noscript>
<!-- The next file contains your menu data, links and menu structure etc -->
<script type="text/javascript" src="menu_data.js"></script>

Michelle · Post by **Michelle** » Tue Jan 20, 2009 4:46 pm

Είτε είναι invalid, είτε έκανες λάθος paste.
Το από που είναι δεν την καθιστά αυτομάτως valid.
Παραδείγματος χάριν, δεν έχει start tag για το head.

Post by **Ισοβίτης** » Tue Jan 20, 2009 5:31 pm

Κατ' αρχάς, φτιάξε το head. Υπάρχει tag </head> που κλείνει, αλλά δεν ανοίγει πουθενά. Δηλαδή, απλά πρόσθεσε "<head>" μετά το "<html>".

Στη συνέχεια, αν πάλι δεν δουλεύει, δοκίμασε να δηλώσεις τα <script> tags στο head, κάτω από το tag που εισάγεις το CSS.

Τέλος, βεβαιώσου ότι τα αρχεία milonic_src.js, mmenudom.js και menu_data.js βρίσκονται στο ίδιο directory με το αρχείο html.

proskopos · Post by **proskopos** » Tue Jan 20, 2009 6:41 pm

Ισοβίτης wrote:Κατ' αρχάς, φτιάξε το head. Υπάρχει tag </head> που κλείνει, αλλά δεν ανοίγει πουθενά. Δηλαδή, απλά πρόσθεσε "<head>" μετά το "<html>".

Στη συνέχεια, αν πάλι δεν δουλεύει, δοκίμασε να δηλώσεις τα <script> tags στο head, κάτω από το tag που εισάγεις το CSS.

Τέλος, βεβαιώσου ότι τα αρχεία milonic_src.js, mmenudom.js και menu_data.js βρίσκονται στο ίδιο directory με το αρχείο html.

Εννοείται ότι το <head> απλά έτυχε στο c-p εδώ να το ξεχάσω...

Όλα όσα προτίνεις Ισοβίτη τα έχω κάνει...
ΓΜΤ

tsilochr · Post by **tsilochr** » Mon Mar 02, 2009 2:37 pm

ένα εδιαφέρον video που πέτυχα από τα google tech talks

JavaScript: The Good Parts

Link

Post by **Ισοβίτης** » Mon Mar 02, 2009 11:36 pm

Και ένα ενδιαφέρον αρθράκι για την ολοένα αυξανόμενη χρήση (και δύναμη) των scripting γλωσσών: Scripting languages spark new programming era.

Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!

Re: Javascript power!