Kjapp og trygg hosting for Wordpress

Sideovergang

adeneo

Medlem
script tagger skal normalt i head på dokumentet, men enkelte lager dingser hvor script taggene må inn andre steder, slik som den dingsen til yr.

$.getScript setter inn scriptet i head, men dersom du ønsker det annet sted må du sette det inn der i stedet, noe sånt:

PHP:
var yr = "http://www.yr.no/sted/Norge/Buskerud/Hemsedal/Hemsedal_Feriesenter/ekstern_boks_tre_dager.js";
document.write(unescape("%3Cscript src='" + yr + "' type='text/javascript'%3E%3C/script%3E"));


DEMONSTRATION
 

adeneo

Medlem
Nei, i utgangspunktet ikke ettersom script tagger ikke skal inn i blokkelementer.

Resig har sagt noe slikt vedrørende jQuery:

All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM.

Det betyr at slike scripts som det fra yr, ikke virker når man setter de inn ettersom de må "settes inn", og det holder ikke å eval'e scriptet.
Vanlig javascript gjør noe av det samme, og for eksempel kan ikke "script" elementer settes inn andre steder enn i head, og det er derfor det forrige eksempelet bruker "escape'ing" av script taggene.
En annen måte å gjøre det samme på er å skrive :

PHP:
var script = '<sc'+'ript>'

altså dele det opp, ettersom med en gang man skriver '<script>' så virker det ikke, og IE har problemer med alle slike metoder til en viss grad uansett.

Det er selvfølgelig en grunn til at det er slik, og det er for det første å unngå at noen setter inn uønskede script tagger i nettsider, det andre er å forhindre at folk gjør merkelige ting, som å dynamisk sette inn script tagger i blokkelementer.

Det finnes sikkert måter å posisjonere yr boksen på også : DEMO
 
Sist redigert:

rimby

Medlem
Pga. ".load" så endrer ikke url-en seg. Jeg husker du nevnte history api, men tror jeg fant noe mye enklere. pushstate
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Prøvde å legge den til nederst som jeg gjorde her, men fikk den ikke til å fungere hva enn jeg gjorde... Vært borti denne før?
Kode:
$(function() { 		
	$(".menu a").on('click', function() { 
		var page = $(this).attr('href');
		$('#content').load(page);
        var h = $(window).height() - 120; 
		$('body, html').stop().animate({scrollTop: h},1200, "easeInOutBack"); 	
		$('#top').fadeIn(500); 
		$("#rss").fadeOut(500);
		$("#fb").fadeOut(500);
		$("#yt").fadeOut(500);
		return false;	
		
		var stateObj = { foo: "bar" };
		window.history.pushState(stateObj, page, "/" + page);
	});
Jeg kom også over denne artikkelen som gjør at pushstate også fungerer på gamle IE versoner.
Handling good old IE: Backbone history with pushState fallback - blog by @johnkpaul

Men fikk ikke prøvd noe på det, siden jeg ikke fikk pushstate til å fungere fra starten. LEste litt om backbone tidligere, men bestemme meg for at det ikke var noe jeg egentlig trengte så så ikke noe mer på det.
Noen tips?
 

adeneo

Medlem
Grunnen til at det ikke virker er fordi du har plassert koden etter at du returnerer "false", altså du avslutter hele funksjonen der det står "return false", slik at alt som kommer etter den linjen ikke blir kjørt.


PHP:
$(function() { 		
	$(".menu a").on('click', function(e) { 
        e.preventDefault();

		var page = $(this).attr('href'),
               h = $(window).height() - 120,
        stateObj = { page: document.location.pathname };

		$('#content').load(page);

		$('body, html').stop().animate({scrollTop: h},1200, "easeInOutBack"); 	

		$('#top').fadeIn(500); 

		$("#rss, #fb, #yt").fadeOut(500);
		
		if (history.pushState) {
			history.pushState(stateObj, page, "/" + page);
		}else{
			document.location.hash = page;
		}
	});
});

pushstate og popstate er en del av HTML5 History API'en, som jeg nevnte tidligere, og brukes til å oppdatere adressen i adressefeltet uten å "bytte" side.
Det er litt mer innviklet enn som så dersom man skal ha bakover knappen i nettleseren til å virke, ha en fallback til en hash i stedet osv. men kun for å endre adressen bør det virke med det ovenfor.

Backbone er et rammeverk som gjør det enklere å skrive javascript mer etter MVC modellen, altså Models, Views, Controller, hvor man har en kontroller som tar seg av all logikken og setter opp modeller, som henter "views".
MVC er et vanlig mønster for all programmering, og gjør det enklere å holde styr på ting når det blir mye kode og mange ting som skal hentes inn og oppdatere DOM'en samtidig.

Selv har jeg aldri brukt backbone.js, men registrerer at mange bruker det og er fornøyd, men jeg synes det blir mye "overhead", ettersom man er nesten nødt til å også bruke underscore.js samt et rammeverk som jQuery, Dojo eller Zepto i tillegg, og det blir alt for mange bytes for meg?
 
Sist redigert:

rimby

Medlem
Et problem. Nettsia ligger på nettside.no/sidenavn¨
Når jeg navigerer på sia blir jeg da sendt til nettside.no/side1 osv..
istedenfor nettside.no/sidenavn/side1
Jeg prøvde å fikse det selv på denne måten:
Kode:
    $(".menu a").on('click', function(e) {  
        e.preventDefault(); 

        var page = $(this).attr('href'), 
               h = $(window).height() - 120, 
        stateObj = { page: document.location.pathname };   //og
		// stateObj = 'nettside.no/sidenavn';
        $('#content').load(page + '.html'); 

        $('body, html').stop().animate({scrollTop: h},1200, "easeInOutBack");      

        $('#top').fadeIn(500);  

        $("#rss, #fb, #yt").fadeOut(500); 
         
        if (history.pushState) { 
            history.pushState(stateObj, page, "/" + page); 
        }else{ 
            document.location.hash = 'nettside.no/sidenavn' + page; 
        } 
    });
Men det fungerte selvsagt ikke..

Jeg oppdaget pushstate da jeg kom over denne siden: history.pushState() Example - Part of a demo for #ProSEO
Det virker ikke som de bruker noe annet enn pushstate og popstate der?
likevel fungerer fram og tilbake knappen..
Så hva skal til?
 

rimby

Medlem
Takk, det fungerte.
Jeg har også rotet litt rundt med popstate. La til denne, som gjorde at frem og tilbake knappen fungerte. Men hvis jeg forlater siden og trykker tilbake, fungerer den ikke, heller ikke om jeg oppdaterer siden. Noe jeg er nødt til å få til. Var så vanskelig å finne noen god forklaring på dette

Kode:
	window.onpopstate = function(event) {
		$('#content').load(document.location + '.html');
	};
 

rimby

Medlem
Eller hva med å bare bruke hashtags igjen?
Kode:
window.location.hash = $(this).attr('href');
Den la til en hashtag i urlen, men gjorde det ikke mulig å bruke fram og tilbake knappene til å navigere gjennom sidene. Vanligvis fungerer jo dette? Er det e.preventDefault(); som roter det til?
 

rimby

Medlem
Jeg klarer ikke å finne noen god løsning på det her... har rotet rundt med mange forskjellige løsninger som ikke fungerte... det mermeste jeg kom var dette:
Kode:
$(function() { 
	var page = window.location.hash.split("#")[1] + '.html';		
			   
    $('#content').load(page);
    	$(window).on('hashchange', function() { 
						
		var page = window.location.hash.split("#")[1] + '.html';
		$('#content').load(page);
		
	});  

    $(".menu a").on('click', function() {  				
				
		$(window).scrollTop(0);
			   
        
		$("#content").scrollTop(0);
		var h = $(window).height() - 120; 				
		$('body, html').stop().animate({scrollTop: h},1200, "easeInOutBack");    

        $('#top').fadeIn(500);  					

		$("#rss, #fb, #yt").fadeOut(500);
	   

	});
});
Har gjort om linkene til å line til f.eks. #kontakt

Det som er problemet med denne er den er litt laggy, bildet blinker i et sekund før ting skjer.
Jeg tror dette er fordi linken sender siden til diven og etterpå tilbake forså å utføre animasjonen og loadingen. Noen ideer om hvordan jeg fikser dette?
 
Sist redigert:

adeneo

Medlem
Det blir bare tipping, men det kan være at klikk på anchor elementet scroller ettersom det er et hashtegn (#) i anchor elementets href.
Du kan teste for å se om noe slikt virker (skrevet i full fart og ikke testet ? )

PHP:
$(function() {
    $(window).on('hashchange', loadPage).trigger('hashchange');
    
    function loadPage() {
        var page = window.location.hash.replace('#','')+'.html';        
        $('#content').load(page);
    }
    
    $(".menu a").on('click', function(e) {                  
        e.preventDefault();
        window.location.hash=$(this).attr('href').replace('#','');
        $(window).add("#content").scrollTop(0);
        var h = $(window).height() - 120;                 

        $('body, html').stop().animate({scrollTop: h},1200, "easeInOutBack");    
        $('#top').fadeIn(500);                      
        $("#rss, #fb, #yt").fadeOut(500);
    });
});
 

rimby

Medlem
hmm... den er ikke laggy, men nå hver gang jeg trykker på en tab, så hopper den til top først for så å utføre animasjonen ned til innholdet. Klarer ikke helt å forstå hvorfor...
Det er jo en scrolltop der, men den la jeg inn slik at innholdet i content skal scrolles til top, ikke hele siden

EDIT: var vist scrollTop(0) som var synderen, fjerner jeg den hopper sia raskt ned til innholdet uten å utføre animasjonen..
Så det må da mulig å lage en if setning ut av dette. dersom vinduet befinner seg mer en "en megde" fra top, så skal den ikke gå til top først?
 
Sist redigert:

adeneo

Medlem
Burde være rett frem i så fall:

PHP:
if ($(window).scrollTop() < 300) $(window).scrollTop(0);

eller noe sånt ?

Forøvrig er :

PHP:
$(window).add("#content").scrollTop(0);

hele viduet samt #content elementet, og ikke bare innholdet, det ville vel bare vært :

PHP:
$("#content").scrollTop(0);
 

rimby

Medlem
merkelig...
Hvis jeg skriver:
Kode:
			$(window).add("#content").scrollTop(0);
Hopper den til toppen hver gang.
Hvis jeg skriver:
Kode:
		if($(window).scrollTop() < 300) {
			$(window).add("#content").scrollTop(0);
		}
Så dropper den helt å hoppe til tops uansett hvor jeg befinner meg... irriterende dette her
 
Topp