Just nu i M3-nätverket
Gå till innehåll

Class för externa länkar - hur gör jag?


iHNRK

Rekommendera Poster

Hej!

 

Har tidigare fått hjälp här på forumet för att få en div att fungera som en iframe med hjälp av vad jag tror vara AJAX (bifogar kod nedan), det vill säga att alla länkar öppnar sidor i nämnda div. Det funkar klockrent! Nu behöver jag dock två (externa) länkar som ska öppna sidor i ny tab/fönster, bildlänkar som ska öppna bilder i en lightbox-effekt och videolänkar som också ska öppnas i en videolightbox-effekt. Vill någon vänlig själ se över min kod och tala om för mig vad som bör göras? Jag bör väl tillägga att min kunskap hittills är begränsad till xhtml och css, så... skola mig snälla!

 

[log]

vfn.ss

/* --- INDEX --- */
#index_wrapper {
 margin: auto auto auto auto;
 padding: 0px 0px 0px 0px;
 width: 500px;
 height: 500px;
}

/* --- INDEX END --- */

/* --- MAIN --- */
body.main {
 background: url('../px/bakgrund.png');
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}

#wrapper {
 margin: 0px auto 0px auto;
 padding: 0px 0px 0px 0px;
 width: 932px;
}

#top {
 background: url('../px/top.png') no-repeat top right;
 height: 192px;
 width: 933px;
}

a.extlink {
 target-new: tab;
}

div.facetwit {
 float: right;
 height: 30px;
 margin: auto 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 position:absolute;
 left: 1013px;
 top: 115px;
 text-align: right;
 vertical-align: bottom;
 width: 65px;
}

img.facetwit {
 height: 30px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 width: 30px;
}

#left {
 background: url('../px/left.png') no-repeat top right;
 float: left;
 height: 482px;
 width: 323px;
}

#container {
 background: url('../px/content.png');
 float: left;
 height: 482px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 width: 578px;
}

/*--- CONTENT ---*/
#content {
 overflow: hidden;
 width: 578px;
 height: 482px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}
/*--- CONTENT END ---*/

#right {
 background: url('../px/right.png') no-repeat top right;
 float: left;
 height: 482px;
 width: 31px;
}

#bottom {
 background: url('../px/bottom.png') no-repeat top right;
 float: left;
 height: 51px;
 width: 932px;
}

/* --- MAIN END ---*/

/* --- START --- */
body.incontent {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}

#strt.wrapper {
 height: 485px;
 margin: 0px auto 0px auto;
 padding: 0px 0px 0px 0px;
 width: 568px;
}

div.vlkmmn_img {
 height: 161px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: center;
 width: 568px;
}

div.strt_img {
 float: left;
 height: 161px;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 text-align: center;
 width: 189px;
}

img {
 border: 0px;
}
/* --- START END --- */

/* --- BILDER --- */
a {
 color: #ffffff;
 text-decoration: none;
}
/* --- BILDER END --- */

/* --- KONTAKT --- */
div.format_kontakt {
 color: #ffffff;
 height: 300px;
 margin: 0px auto 0px auto;
 padding: 0px 0px 0px 0px;
 width: 400px;
}
/* --- KONTAKT END --- */

/* --- FILMER --- */
/* the overlayed element */
div#voverlay {

/* growing background image */
background-image:url(../px/vid_images/white.png);

/* dimensions after the growing animation finishes  */
width:864px;
height:480px;

/* initially overlay is hidden */
display:none;

/* some padding to layout nested elements nicely  */
padding:35px 35px 10px 35px;
}

/* default close button positioned on upper right corner */
div#voverlay div.close {
background-image:url(../px/vid_images/close.png);
position:absolute;
left:5px;
top:5px;
cursor:pointer;
height:30px;
width:30px;
}

div#vcontainer{
left:0;
top:0;
width:100%;
height:100%;	
background:url(../px/vid_images/loading.gif) no-repeat 50% 50%;
}
#videogallery { zoom:1; }
#videogallery span{ display:block; }
#videogallery a{
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:100px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}
#videogallery a img{
display:block;
border:none;
margin:0;
}
#videogallery a:hover{
opacity:1;
}
/* --- FILMER END --- */

 

main.html

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
       <title>Varning F&ouml;r N&ouml;je</title>
       <link media="all" type="text/css" rel="stylesheet" href="css/vfn.css" />
       <link rel="shortcut icon" href="px/logo.ico" type="image/x-icon" />

       <script type="text/javascript" src="http://www.google.com/jsapi"></script>
       <script type="text/javascript">
        google.load("jquery","1.4");
        google.setOnLoadCallback(function(){
            $("#container").load("start.html #content", function(){
                   //alert("Innehållet hämtades")
               });
	        //dokumentation om live-events http://docs.jquery.com/Events/live
	        $("a:not(.external)").live("click",function(){
		        thislink = $(this).attr("href");
		        $("#container").load(thislink + " #content", function(){
			        //alert("Innehållet hämtades")
			    });
		        //dokumentation om load på http://docs.jquery.com/Ajax/load
		        return false;
	        });
        });
       </script>
       <script type="text/javascript">
           <!--
               function roll(img_name, img_src)
                   {
                       document[img_name].src = img_src;
                   }
           //-->
       </script>
       <!-- Start VideoLightBox.com HEAD section -->
	<style type="text/css">#videogallery a#videolb{display:none}</style>
	<script src="js/jquery.tools.min.js" type="text/javascript"></script>
	<script src="js/swfobject.js" type="text/javascript"></script>
	<!-- make all links with the 'rel' attribute open overlays -->
	<script src="js/videogallery.js" type="text/javascript"></script>
	<!-- End VideoLightBox.com HEAD section -->
   </head>

<body class="main">

   <div id="wrapper">

       <div id="top">
           <div class="facetwit">
               <a href="http://www.facebook.com/search/?q=varning+for+noje%27#/profile.php?id=100000567897494&ref=search&sid=644694715.3976400516..1" target="_blank">
                   <img class="facetwit" src="px/facebook.png" alt="Bli vän med oss på Facebook!" />
               </a>
               <a href="http://twitter.com/varningfornoje" target="_blank">
                   <img class="facetwit" src="px/twitter.png" alt="Följ oss på Twitter!" />
               </a>
           </div>
       </div>        
       <div id="left"></div>
       <div id="container">                                  
       </div>
       <div id="right"></div>
       <div id="bottom"></div>

   </div>

</body>
</html>

 

start.html

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
       <title>Start</title>
       <link media="all" type="text/css" rel="stylesheet" href="css/vfn.css" />
       <link rel="shortcut icon" href="px/logo.ico" type="image/x-icon" />

       <script type="text/javascript" src="http://www.google.com/jsapi"></script>
       <script type="text/javascript">
        google.load("jquery","1.4");
        google.setOnLoadCallback(function(){
	        //dokumentation om live-events http://docs.jquery.com/Events/live
	        $("a:not(.external)").live("click",function(){
		        thislink = $(this).attr("href");
		        $("#container").load(thislink + " #content", function(){
			        //alert("Innehållet hämtades")
			    });
		        //dokumentation om load på http://docs.jquery.com/Ajax/load
		        return false;
	        });
        });
       </script>
       <script type="text/javascript">
           <!--
               function roll(img_name, img_src)
                   {
                       document[img_name].src = img_src;
                   }
           //-->
       </script>
   </head>

<body class="incontent">

   <div id="container">
       <div id="content">
           <div id="strt_wrapper">
               <div class="vlkmmn_img">
                   <img src="px/valkommen.gif" alt="" />
               </div>
               <div class="strt_img">
                   <a href="bilder.html" onmouseover="roll('bilder', 'px/bilder_over.gif')" onmouseout="roll('bilder', 'px/bilder.gif')">
                       <img src="px/bilder.gif" alt="" name="bilder" />
                   </a>
               </div>
               <div class="strt_img">
                   <a href="filmer.html" onmouseover="roll('filmer', 'px/filmer_over.gif')" onmouseout="roll('filmer', 'px/filmer.gif')">
                       <img src="px/filmer.gif" alt="" name="filmer" />
                   </a>
               </div>
               <div class="strt_img">
                   <a href="texter.html" onmouseover="roll('texter', 'px/texter_over.gif')" onmouseout="roll('texter', 'px/texter.gif')">
                       <img src="px/texter.gif" alt="" name="texter" />
                   </a>
               </div>
               <div class="strt_img">
                   <a href="omoss.html" onmouseover="roll('omoss', 'px/omoss_over.gif')" onmouseout="roll('omoss', 'px/omoss.gif')">
                       <img src="px/omoss.gif" alt="" name="omoss" />
                   </a>
               </div>
               <div class="strt_img">
                   <a href="kontakt.html" onmouseover="roll('kontakt', 'px/kontakt_over.gif')" onmouseout="roll('kontakt', 'px/kontakt.gif')">
                       <img src="px/kontakt.gif" alt="" name="kontakt" />
                   </a>
               </div>
               <div class="strt_img">
                   <a href="f-t.html" onmouseover="roll('f-t', 'px/f-t_over.gif')" onmouseout="roll('f-t', 'px/f-t.gif')">
                       <img src="px/f-t.gif" alt="" name="f-t" />
                   </a>
               </div>
           </div>
       </div>
   </div>

</body>
</html>

 

bilder.html

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
       <title>Bilder</title>
       <link media="all" type="text/css" rel="stylesheet" href="css/vfn.css" />
       <link rel="shortcut icon" href="px/logo.ico" type="image/x-icon" />        

	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
       <script type="text/javascript">
        google.load("jquery","1.4");
        google.setOnLoadCallback(function(){
	        //dokumentation om live-events http://docs.jquery.com/Events/live
	        $("a:not(.external)").live("click",function(){
		        thislink = $(this).attr("href");
		        $("#container").load(thislink + " #content", function(){
			        //alert("Innehållet hämtades")
			    });
		        //dokumentation om load på http://docs.jquery.com/Ajax/load
		        return false;
	        });
        });
       </script>
</head>

<body class="incontent">

   <div id="container">
       <div id="content">
           <a href="start.html">
               <img src="px/start.gif" alt="" />
           </a>
       </div>
   </div>

</body>
</html>

 

filmer.html

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
       <title>Filmer</title>
       <link media="all" type="text/css" rel="stylesheet" href="css/vfn.css" />
       <link rel="shortcut icon" href="px/logo.ico" type="image/x-icon" />

       <script type="text/javascript" src="http://www.google.com/jsapi"></script>
       <script type="text/javascript">
        google.load("jquery","1.4");
        google.setOnLoadCallback(function(){
	        //dokumentation om live-events http://docs.jquery.com/Events/live
	        $("a:not(.external)").live("click",function(){
		        thislink = $(this).attr("href");
		        $("#container").load(thislink + " #content", function(){
			        //alert("Innehållet hämtades")
			    });
		        //dokumentation om load på http://docs.jquery.com/Ajax/load
		        return false;
	        });
        });
       </script>

       <!-- Start VideoLightBox.com HEAD section -->
	<style type="text/css">#videogallery a#videolb{display:none}</style>
	<script src="js/jquery.tools.min.js" type="text/javascript"></script>
	<script src="js/swfobject.js" type="text/javascript"></script>
	<!-- make all links with the 'rel' attribute open overlays -->
	<script src="js/videogallery.js" type="text/javascript"></script>
	<!-- End VideoLightBox.com HEAD section -->
   </head>

<body class="incontent">
   <div id="container">
       <div id="content">
           <!-- Start VideoLightBox.com BODY section -->
        <div id="videogallery">
            <a rel="#voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=5718292&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;autoplay=1" title="Atmintis">
                <img src="data/thumbnails/0.png" alt="Atmintis" />
                <span></span>
            </a>
            <a id="videolb" href="http://videolightbox.com">
                Adding Video To Web by VideoLightBox.com v1.6
            </a>
        </div>
        <!-- End VideoLightBox.com BODY section -->
        <a href="start.html">
               <img src="px/start.gif" alt="" />
           </a>
       </div>
   </div>
</body>
</html>

[/log]

 

Så här ser det ut: http://www.ihnrk.se/VFN/main.html

 

Jättetacksam för svar!

 

Länk till kommentar
Dela på andra webbplatser

Nu behöver jag dock två (externa) länkar som ska öppna sidor i ny tab/fönster,
Är det t ex följande video-länk du vill öppna i nytt fönster?

<a rel="#voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=5718292&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;autoplay=1" title="Atmintis">

 

Länk till kommentar
Dela på andra webbplatser

Nej, den ska öppnas i en videolightbox-effekt. Du kan se hur den fungerar om du öppnar filmer.html ensam. Här är en länk:

http://www.ihnrk.se/VFN/filmer.html

Det är när filmer.html laddas in i main.html som problemet uppstår, och jag vet inte riktigt var jag ska leta...

 

Det är än så länge endast Facebook- och Twitterknapparna som ska gå till externa sidor. Bilderna och filmerna öppnas i lightbox-effekter...

 

Länk till kommentar
Dela på andra webbplatser

Tyvärr är jag inte med men jag tror Jonas har hjälpt dig tidigare och är mer insatt i "den röda tråden" i koden.

Överlåter åt honom(eller någon annan som orkar sätta sig in i hela koden) att ge ev lösning.

 

Själv tycker jag att Facebook och Twitter-knapparna fungera även när "filmer" laddas in i main...

 

Länk till kommentar
Dela på andra webbplatser

Tyvärr är jag inte med

Ok, tack för försöket i alla fall... :thumbsup: Hoppas Jonas_Bo orkar med mig ett tag till, då.

Själv tycker jag att Facebook och Twitter-knapparna fungera även när "filmer" laddas in i main...

Jaha, de små uppe i högra hörnet? För när jag klickar på dem händer ingenting... Märkligt. Vilken browser använder du? Kan det vara något sånt som är skillnaden, tro?

 

Länk till kommentar
Dela på andra webbplatser

Vilken browser använder du?

I IE 8 skapas ett nytt fönster.

I FF 9.3 skapas en ny tab.

 

Hoppas Jonas_Bo orkar med mig ett tag till
Det gör han säkert, han är ju en träningsmänniska med mycket "kondis" ;)

 

Länk till kommentar
Dela på andra webbplatser

I IE 8 skapas ett nytt fönster.

I FF 9.3 skapas en ny tab.

Ja, i mitt IE 8 skapas också ett nytt fönster. Men FF 9.3? Firefox? Vad jag kan se är version 3.6 sprillans ny... Hur som helst så skapas ingen tab i version 3.6 när jag klickar på länkarna, det händer ingenting...

Det gör han säkert, han är ju en träningsmänniska med mycket "kondis" ;)

Haha, en sån tur för såna som mig!

 

Länk till kommentar
Dela på andra webbplatser

Men FF 9.3? Firefox?
Ja, har inte du den ;).

Då är det nog bara jag som har den ;)

(felskrivet av mig!)

 

Hur har du ställt in FF ang att skapa tab/fönster?

 

Länk till kommentar
Dela på andra webbplatser

Ja, har inte du den ;).

Då är det nog bara jag som har den ;)

(felskrivet av mig!)

Haha, skönt! Trodde jag låg efter ;)

 

Hur har du ställt in FF ang att skapa tab/fönster?

Inställningar -> Flikar, allt ikryssat förutom flytta genast fokus till ny flik...

Finns det kanske fler inställningar att göra?

 

Länk till kommentar
Dela på andra webbplatser

Hoppas Jonas_Bo orkar med mig ett tag till

 

Jag tror att problemet ligger i att det event som kollar av länkar med rel="#voverlay" (skall det förresten verkligen vara en brädhög # i det namnet?) inte kollar efter nya element som jquerys LIVE-event gör så därför måste man ändra lite i hur eventet kollas av.

Börja med att lägga till class="external" på de länkar som inte skall laddas med ajax, som bilder.html och omoss.html skall göra.

 

Jag behöver se js/videogallery.js hur den ser ut för att kunna ge förslag på ändringar.

 

 

Länk till kommentar
Dela på andra webbplatser

skall det förresten verkligen vara en brädhög # i det namnet?
Ja, jag testade att ta bort den och då funkade inte vare sig lightbox-effekten eller länken.

 

Börja med att lägga till class="external" på de länkar som inte skall laddas med ajax
Sagt och gjort, nu funkar länkarna till Facebook och Twitter. De öppnas i ny flik, precis som jag vill! (Hur funkar det förresten? Jag har ju inte deklarerat någon class vid namn external. Är det css och finns det fler såna "fördeklarerade" classer?)

 

Jag behöver se js/videogallery.js
Här har du den:

http://www.ihnrk.se/VFN/js/videogallery.js

 

//////////////////////////////////////////////
// Obfuscated by Javascript Obfuscator 4.2  //
// http://javascript-source.com             //
//////////////////////////////////////////////
eval((function(x){var d="";var p=0;while(p<x.length){if(x.charAt(p)!="`")d+=x.charAt(p++);else{var l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else d+="`";p+=4}}return d})("jQuery(function () {var $ = ` 6\";if (!document.getElementById(\"vcontainer\")) {$(\"body\").append($(\"<div id='voverlay'></div>\"));$(\"#` 0$` B0 = '` z&` N(}` V!ideogallery a[rel]\").` i#({api:true, onClose:`\"=)swfobject.removeSWF(\"` n!_`!J%;this.getBackgroundImage().hide();}, onBeforeLoad` u*var c = `#'6`! +`#j!c` S#d = `\"e#`\"Q%;d.attr({id:` O+}`#I#`$)'`#J$d);}var wmkText = \"VideoLightBox\";` 7#Link = \"http://` |!lightbox.com\";c =` ^%?`!N- : 0`\" !c) {c.css({position:\"absolute\", right:\"38px\", top` #%padding:\"0 0 0 0`!|8c);}`!)! &&`#[&all`#;#f`#;#iframe src=\\\"javascript:false\\\"></` <\">\");f`![7left:0`!j\"0, width:\"100%\", he`\".\"` (#filter:\"alpha(opacity=0)\"});f`$^#scroll`\"I!no\", `!@!spacing:0, border:0` 3#B` )\"\"no\"});c`\"^$f`$w#d = c`$0!`\"b%create`&L#(\"A\")) : c`$>!d) {d`\"=,relative\", display:\"block\", 'b`'|%-color':\"#E4EFEB\", ` -!:\"#837F80\", 'font-family':\"Lucida Grande,Arial,Verdana,sans-serif` O%size':\"11`%P!` .\"w`#]!':\"normal` B&tyle` +(`%{%1px 5` ]!`#z#:0.7`$$470)\"`$l%auto`$j'` (#margin`&r&, outline:\"none\"}`)W&href:`(l#` 2!html(`(T#);d.bind(\"contextmenu\", `+4&eventO`,;!) {return `'+!;`%0(`*2$src = `,F$Trigger()`!F\"\"href`+W#typeof d != \"number\" && (!c || !c`!c! |` \"%())`!8%;}`-k&`&5\"SWF({data:src`'s;wmode:\"opaque\"}, {allowS`)G!Access:\"always\", ` 7!FullScreen`/E!}, `-b-}});});"))

 

Jag antar att det syns vilken kod jag skrivit själv och vilken som är lånad. Vilken röra! Hoppas det går ändå, annars städar jag upp den åt dig!

 

Länk till kommentar
Dela på andra webbplatser

Ja, jag testade att ta bort den och då funkade inte vare sig lightbox-effekten eller länken.

Ok, då skall det väl vara så, jag har dock inte sett det innan.

 

Hur funkar det förresten? Jag har ju inte deklarerat någon class vid namn external. Är det css och finns det fler såna "fördeklarerade" classer?

Även ifall det är en css-klass man anger i en parameter så har det inget med css att göra, eftersom du inte har deklarerat någon stil.

Undantaget görs i javascriptet, eftersom vi måste ha något att gå på så är det smidigast att använda class-parametern.

 

Jag fåt undersöka lite i javascriptet.

Återkommer.

 

Länk till kommentar
Dela på andra webbplatser

Jag fåt undersöka lite i javascriptet.

Återkommer.

Som sagt, hur går det? Är det mycket att gå igenom? Du säger väl till om du har gett upp?

Länk till kommentar
Dela på andra webbplatser

Som sagt, hur går det? Är det mycket att gå igenom? Du säger väl till om du har gett upp?

 

Jag åkte iväg på semester istället :)

 

Prova istället att göra om hur ajaxen fungerar.

Använd class på de länkar som skall öppnas internt och ingen som skall öppnas externt eller i modalt fönster.

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...