| | |
| Stránka: 1 z 1
| [ Príspevkov: 7 ] | |
Autor | Správa |
---|
Registrovaný: 01.05.14 Prihlásený: 07.11.19 Príspevky: 152 Témy: 52 Bydlisko: Dubovce |
Zdravím, chcel by som poprosiť o pomoc so zmenšením kódu v JS Kód: <script type="text/javascript"> function showCoRobime1() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime1").style.display = "block"; } function showCoRobime2() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime2").style.display = "block"; } function showCoRobime3() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime3").style.display = "block"; } function showOnas() { document.getElementById("uvod").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("onas").style.display = "block"; } function showKontakt() { document.getElementById("uvod").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("kontakt").style.display = "block"; } </script>
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
padla mi sanka v provom rade nam treba vidiet html kod, bez neho ti tazko pomozeme. ide o to, ze sa to bude dat riesit na 99% dynamicky, bez toho aby si to robil takto pracne pre kazdy element. ale v prvom rade by som odporucil nepouzivat .style.display ani ziadne css atributy. css patri do suboru css a nie do JS. rozumnejsie to bude priradenim odobratim class-y. napr.: document.getElementById("uvod").classList.add('active') / document.getElementById("uvod").classList.remove('active') a ak sa nemylim, tak toto mas priamo v html subore. nechces to dat do .js suboru a ten vlozit do html?
|
|
Registrovaný: 01.05.14 Prihlásený: 07.11.19 Príspevky: 152 Témy: 52 Bydlisko: Dubovce | Napísal autor témy GamerSK: 23.05.2017 17:04 | |
|
V princípe to je jedno kde to bude ale hlavne mi išlo o zmenšenie toho kódu Celé html Kód: <?php include "cache.php"; ?> <!DOCTYPE html> <html lang="sk"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Stranecka</title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css"> <link href="/css/style.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn"t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script> <![endif]--> </head> <body class="index"> <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-second navbar-fixed-top"> <div class="container page-scroll"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="http://navrhy.6f.sk/admin">Firma s. r. o.</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Čo robíme <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a onclick="showCoRobime1();">Článok 1</a> </li> <li> <a onclick="showCoRobime2();">Článok 2</a> </li> <li> <a onclick="showCoRobime3();">Článok 3</a> </li> </ul> </li> <li> <a onclick="showOnas();">O Nás</a> </li> <li> <a onclick="showKontakt();">Kontakt</a> </li> <li> <a href="http://navrhy.6f.sk/"><i class="fa fa-home" aria-hidden="true"></i></a> </li> <li> <a href="logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i></a> </li> </ul> </div> </div> </nav> <section class="admin" id="admin"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Administrácia</h2> <h3 class="section-subheading text-muted">Ste prihlásený ako <strong><?php echo $login_session; ?></strong></h3> <h4 class="section-subheading" id="uvod">Pre upravu článku zvoľte názov článku v hornom menu</h3> <div class="uprava" id="corobime1" style="display:none;"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (1)</h3> <input name="nazov" class="form-control col-centered" type="text" value="<?php include "edit_corobime.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include "edit_corobime.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit1">Upraviť</button> </form> </div> <div class="uprava" id="corobime2" style="display:none;"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (2)</h3> <input name="nazov2" class="form-control col-centered" type="text" value="<?php include "edit_corobime2.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text2"><?php include "edit_corobime2.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit2">Upraviť</button> </form> </div> <div class="uprava" id="corobime3" style="display:none;"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (3)</h3> <input name="nazov3" class="form-control col-centered" type="text" value="<?php include "edit_corobime3.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text3"><?php include "edit_corobime3.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit3">Upraviť</button> </form> </div> <div class="uprava" id="onas" style="display:none;"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - O nás</h3> <textarea class="form-control col-centered" rows="5" cols="60" name="text4"><?php include "edit_onas.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit4">Upraviť</button> </form> </div> <div class="uprava" id="kontakt" style="display:none;"> <form action="edit_kontakt.php" class="form-horizontal" method="post"> <h3 class="text-center">Úprava Kontaktov</h3> <p>Adresa: <input name="text5" class="form-control kontakt col-centered" type="text" value="<?php include "edit_adresa.php"; echo $row["Text"]; ?>"></p> <p>Telefon: <input name="text6" class="form-control kontakt col-centered" type="text" value="<?php include "edit_telefon.php"; echo $row["Text"]; ?>"></p> <p>Email: <input name="text7" class="form-control kontakt col-centered" type="text" value="<?php include "edit_email.php"; echo $row["Text"]; ?>"></p> <button type="submit" class="btn btn-default" name="neco">Upraviť</button> </form> </div> </div> </div> </div> </section> <script src="/jquery/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script type="text/javascript"> function showCoRobime1() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime1").style.display = "block"; } function showCoRobime2() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime2").style.display = "block"; } function showCoRobime3() { document.getElementById("uvod").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("corobime3").style.display = "block"; } function showOnas() { document.getElementById("uvod").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("kontakt").style.display = "none"; document.getElementById("onas").style.display = "block"; } function showKontakt() { document.getElementById("uvod").style.display = "none"; document.getElementById("corobime1").style.display = "none"; document.getElementById("corobime2").style.display = "none"; document.getElementById("corobime3").style.display = "none"; document.getElementById("onas").style.display = "none"; document.getElementById("kontakt").style.display = "block"; } </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"/> <script src="/js/bootstrap.min.js" /> <script src="/js/jqBootstrapValidation.js"/> <script src="/js/script.min.js"/> </body> </html>
|
|
Registrovaný: 28.02.11 Prihlásený: 24.04.24 Príspevky: 197 Témy: 6 Bydlisko: Bratislava | Napísal weroro: 24.05.2017 10:17 | |
|
Ja ťa nebudem kritizovať, lebo ty sám postupom času zistíš, že to čo robíš nie je zrona optimálne. Ale to je vývoj. Tu máš takúto zverinu: Kód: /** @type {HTMLElement} */ var openedSection = null;
/** * @param {string} sectionName */ function showHideSection(sectionName) {
/** @type {Array} */ var sectionList = [ 'uvod', 'onas', 'kontakt', 'corobime1', 'corobime2', 'corobime3' ];
/** @type {HTMLElement} */ var d = document;
/** @type {HTMLElement} */ var findElement = d.querySelector('#' + sectionName); if (!!findElement === false) { return false; } if (openedSection !== null && openedSection !== findElement) { openedSection.style.display = 'none'; }
for (var i = 0; i < sectionList.length; i++) { /** @type {string} */ var sl = sectionList[i]; if (sl.toLowerCase() === sectionName.toLowerCase()) { findElement.style.display = 'block'; openedSection = findElement; } else { d.querySelector('#' + sl).style.display = 'none'; } }
return false; } Použiješ to takto: Kód: <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Čo robíme <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a onclick="return showHideSection('corobime1');">Článok 1</a> </li> <li> <a onclick="return showHideSection('corobime2');">Článok 2</a> </li> <li> <a onclick="return showHideSection('corobime3');">Článok 3</a> </li> </ul> </li> <li> <a onclick="return showHideSection('onas');">O Nás</a> </li> <li> <a onclick="return showHideSection('kontakt');">Kontakt</a> </li> <li> <a href="http://navrhy.6f.sk/"><i class="fa fa-home" aria-hidden="true"></i></a> </li> <li> <a href="logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i></a> </li> </ul>
_________________ Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti. |
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
myslim, ze by to slo urobit aj bez javascriptu pomocou :target - ale treba vyskusat Kód: <?php include "cache.php"; ?> <!DOCTYPE html> <html lang="sk"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Stranecka</title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css"> <link href="/css/style.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn"t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script> <![endif]--> </head> <body class="index"> <nav id="mainNav" class="navbar navbar-default navbar-custom navbar-second navbar-fixed-top"> <div class="container page-scroll"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="http://navrhy.6f.sk/admin">Firma s. r. o.</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden"> <a href="#page-top"></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Čo robíme <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#corobime1">Článok 1</a> </li> <li> <a href="#corobime2">Článok 2</a> </li> <li> <a href="#corobime3">Článok 3</a> </li> </ul> </li> <li> <a href="#onas">O Nás</a> </li> <li> <a href="#kontakt">Kontakt</a> </li> <li> <a href="http://navrhy.6f.sk/"><i class="fa fa-home" aria-hidden="true"></i></a> </li> <li> <a href="logout.php"><i class="fa fa-sign-out" aria-hidden="true"></i></a> </li> </ul> </div> </div> </nav> <section class="admin" id="admin"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">Administrácia</h2> <h3 class="section-subheading text-muted">Ste prihlásený ako <strong><?php echo $login_session; ?></strong></h3> <h4 class="section-subheading" id="uvod">Pre upravu článku zvoľte názov článku v hornom menu</h3> <div class="uprava" id="corobime1" style="display:none;"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (1)</h3> <input name="nazov" class="form-control col-centered" type="text" value="<?php include "edit_corobime.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text"><?php include "edit_corobime.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit1">Upraviť</button> </form> </div> <div class="uprava" id="corobime2"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (2)</h3> <input name="nazov2" class="form-control col-centered" type="text" value="<?php include "edit_corobime2.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text2"><?php include "edit_corobime2.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit2">Upraviť</button> </form> </div> <div class="uprava" id="corobime3"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - Čo robíme (3)</h3> <input name="nazov3" class="form-control col-centered" type="text" value="<?php include "edit_corobime3.php"; echo $row["Nazov"]; ?>"> <textarea class="form-control col-centered" rows="5" cols="60" name="text3"><?php include "edit_corobime3.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit3">Upraviť</button> </form> </div> <div class="uprava" id="onas"> <form class="form-horizontal" method="post"> <h3 class="text-center">Úprava článku - O nás</h3> <textarea class="form-control col-centered" rows="5" cols="60" name="text4"><?php include "edit_onas.php"; echo $row["Text"];?></textarea> <button type="submit" class="btn btn-default" name="upravit4">Upraviť</button> </form> </div> <div class="uprava" id="kontakt" > <form action="edit_kontakt.php" class="form-horizontal" method="post"> <h3 class="text-center">Úprava Kontaktov</h3> <p>Adresa: <input name="text5" class="form-control kontakt col-centered" type="text" value="<?php include "edit_adresa.php"; echo $row["Text"]; ?>"></p> <p>Telefon: <input name="text6" class="form-control kontakt col-centered" type="text" value="<?php include "edit_telefon.php"; echo $row["Text"]; ?>"></p> <p>Email: <input name="text7" class="form-control kontakt col-centered" type="text" value="<?php include "edit_email.php"; echo $row["Text"]; ?>"></p> <button type="submit" class="btn btn-default" name="neco">Upraviť</button> </form> </div> </div> </div> </div> </section> <script src="/jquery/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"/> <script src="/js/bootstrap.min.js" /> <script src="/js/jqBootstrapValidation.js"/> <script src="/js/script.min.js"/> </body> </html>
a v css Kód: .uprava { display: none; } .uprava:target { display: block; }
// Spojený príspevok Str 24.05.17 13:11test: https://codepen.io/anon/pen/BRMqoo
|
|
Registrovaný: 28.02.11 Prihlásený: 24.04.24 Príspevky: 197 Témy: 6 Bydlisko: Bratislava | Napísal weroro: 24.05.2017 13:35 | |
|
Hatto: Dosť dobré.
_________________ Neznalosť zložitých operácií necháva myseľ otvorenú pre geniálne riešenia založené na jednoduchosti. |
|
Registrovaný: 01.05.14 Prihlásený: 07.11.19 Príspevky: 152 Témy: 52 Bydlisko: Dubovce | Napísal autor témy GamerSK: 24.05.2017 16:24 | |
|
Ďakujem každému! Použil som css metódu ako napísal Hatto13
|
|
| Stránka: 1 z 1
| [ Príspevkov: 7 ] | |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|