N.nu Support › Svenska

Hur lägger jag in javascript?

classic Classic list List threaded Threaded
♦
♦
 8 messages Options
vigge50
Reply | Threaded
Open this post in threaded view
♦
♦
|

Hur lägger jag in javascript?

vigge50
Hej
Hittade denna sidan där man får upp hur man kan lägga in flikar med olika innehåll och när jag testade det på deras testsida med mitt innehåll tyckte jag det blev bra men hur lägger jag in det på min sida? Det finns både HTML, CCS och Java script samlat i en kod om man trycker vidare på "Try it yourself" och jag undrar om det går och i så fall hur jag för över det till min sida?

http://www.w3schools.com/howto/howto_js_tabs.asp
Jag hjälper till här på forumet och svara på så mycket som jag kan.
Titta gärna in på min hemsida http://www.3dhus.se 
TheSuss
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

TheSuss
Administrator
Hej

På sidan egen mall kan du lägga in javascript, html och css.

N.nu manual - manual.n.nu

CSS och Designhjälp - webb.susscreations.se

vigge50
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

vigge50
Hej
Hela koden ser ut så här

<!DOCTYPE html>
<html>
<style> body {font-family: "Lato", sans-serif;} ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Float the list items side by side */ ul.tab li {float: left;} /* Style the links inside the list items */ ul.tab li a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /* Change background color of links on hover */ ul.tab li a:hover { background-color: #ddd; } /* Create an active/current tablink class */ ul.tab li a:focus, .active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style><body>

<p>Click on the links inside the tabbed menu:</p>

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</li>
</ul>

<div id="London" class="tabcontent">
 

London

  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
 

Paris

  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
 

Tokyo

  <p>Tokyo is the capital of Japan.</p>
</div>

<script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>     
</body>
</html>
Ska jag då sätta följande under CCS

<script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>
Och sen resterande på den sida där jag ska ha det eller måste jag dela upp det på annat sätt?
Jag hjälper till här på forumet och svara på så mycket som jag kan.
Titta gärna in på min hemsida http://www.3dhus.se 
TheSuss
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

TheSuss
Administrator
Det som är css: 

ul.tab { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Float the list items side by side */ ul.tab li {float: left;} /* Style the links inside the list items */ ul.tab li a { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } /* Change background color of links on hover */ ul.tab li a:hover { background-color: #ddd; } /* Create an active/current tablink class */ ul.tab li a:focus, .active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none;

Lägger du längst ner i CSS filen (under html)

Det som är JS: 
<script> 
function openCity(evt, cityName) {
 var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); 
for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } 
tablinks = document.getElementsByClassName("tablinks"); 
for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; 
evt.currentTarget.className += " active"; } 
</script>

Lägger du i html fältet över ##statistics##

Sedan fungerar koden 
<p>Click on the links inside the tabbed menu:</p>

<ul class="tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</li>
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</li>
</ul>

<div id="London" class="tabcontent">
London
  <p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
Paris
  <p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
Tokyo
  <p>Tokyo is the capital of Japan.</p>
</div>


på valfri sida på din sajt.

N.nu manual - manual.n.nu

CSS och Designhjälp - webb.susscreations.se

vigge50
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

vigge50
Tack, nu blev det som jag ville.
Jag hjälper till här på forumet och svara på så mycket som jag kan.
Titta gärna in på min hemsida http://www.3dhus.se 
vigge50
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

vigge50
Hittade en ny funktion som jag har experimenterat lite med på en annan sida men nu vet jag inte hur denna ska läggas in på min sida, här är koden.

 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tour</title>
    <link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
    <script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>    <style> #panorama { width: 600px; height: 400px; } </style></head>
<body>

<div id="panorama"></div>
<script> pannellum.viewer('panorama', { "default": { "firstScene": "kok", "author": "Viktor, 3D hus", "sceneFadeDuration": 1000 }, "scenes": { "kok": { "title": "Kök och vardsgasrum", "hfov": 110, "pitch": -3, "yaw": 117, "type": "equirectangular", "panorama": "http://i.imgur.com/vF2eDD7.jpg", "hotSpots": [ { "pitch": -10, "yaw": 70, "type": "scene", "text": "Hall", "sceneId": "hall", "targetYaw": 180, "targetPitch": 0, }, { "pitch": -10, "yaw": 240, "type": "scene", "text": "Uteplats", "sceneId": "uteplats", "targetYaw": 10, "targetPitch": 0, }, ] }, "hall": { "title": "Hall", "hfov": 110, "yaw": 5, "type": "equirectangular", "panorama": "http://i.imgur.com/6AqIVts.jpg", "hotSpots": [ { "pitch": -5, "yaw": 180, "type": "scene", "text": "Kök", "sceneId": "kok", "targetYaw": 10, "targetPitch": 0 }, { "pitch": -5, "yaw": 84.1, "type": "scene", "text": "Sovrum", "sceneId": "sovrum", "targetYaw": -3, "targetPitch": 0 }, ] }, "sovrum": { "title": "Sovrum", "hfov": 110, "yaw": 5, "type": "equirectangular", "panorama": "http://i.imgur.com/9727rWf.jpg", "hotSpots": [ { "pitch": -5, "yaw": 195, "type": "scene", "text": "Hall", "sceneId": "hall", "targetYaw": 180, "targetPitch": 0 } ] }, "uteplats": { "title": "Uteplats", "hfov": 110, "yaw": 5, "type": "equirectangular", "panorama": "http://i.imgur.com/XCnEPa3.jpg", "hotSpots": [ { "pitch": -5, "yaw": 75, "type": "scene", "text": "Kök och Vardagsrum", "sceneId": "kok", "targetYaw": 180, "targetPitch": 0 } ] }, } }); </script>
</body>
</html>
Och sen finns denna koden också

<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.3/pannellum.htm?config=/configs/tour.json"></iframe>
Jag förstår att den delen som står inom script ska in i HTML koden för mallen men ska jag lägga allt inom head i CCS och sen bara "<div id="panorama"></div>" på sidan den ska visas?

Och var ska jag lägga iframe koden?

Tack så mycket för hjälpen, denna funktionen skulle verkligen uppskatta om jag fick in på min hemsida.
Jag hjälper till här på forumet och svara på så mycket som jag kan.
Titta gärna in på min hemsida http://www.3dhus.se 
vigge50
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

vigge50
Fick hjälp på annat håll så det är löst nu.
Jag hjälper till här på forumet och svara på så mycket som jag kan.
Titta gärna in på min hemsida http://www.3dhus.se 
TheSuss
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: Hur lägger jag in javascript?

TheSuss
Administrator
Toppen!

N.nu manual - manual.n.nu

CSS och Designhjälp - webb.susscreations.se

Free forum by Nabble Edit this page