Jump to content

Search the Community

Showing results for tags 'html'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 832 results

  1. i want to introduce my first open source framework. its name is tedjs(easy elemen definer) . a library oriented framework. with this you will can design your html in your way. you can create elements , attributes , text nodes and comment nodes. you can control every thing. could you please visit its documents and tell your comments? i write a complementary library for it. its name is aml. it has some functions to help you. you can use it as a sample. tedjs documents: https://tedjs.org/#page:doc tedjs github: https://github.com/poryagrand/tedjs aml github: https://github.com/poryagrand/tedjs.aml.std thank you in advance
  2. Hi, I wanted to create a popup/modal window on my blogger website landing page. This would be a disclaimer and on agreeing users can access the webpage (www.atriumjuris.ga). Can anyone please help!?
  3. I am trying to create a web comic aggregation website in which users can view a variety of different web comics all on one website in a user-friendly format. I am currently trying to decide on the best way to pull comics from other people's websites (if I can get this website to work, I eventually plan on paying for content, but right now I'm just trying to see if I can get it to work in the easiest way possible). After some research, it seems like I could either try to parse built-in RSS feeds which most of these websites include (but which vary from website to website and may not include all the content I want), or I can try to use some kind of web scraper. Specifically, I would like to be able to access every comic on a given website in an automated fashion (I would like users to be able to view comics by date). What are the advantages and disadvantages of using an RSS feed as opposed to a web scraper? Is there another possible approach that I have missed? Also, from other questions, people have suggested to me that I use jFeed, an extension to jQuery, to parse RSS feeds if I decide to go this route. However, I am a little bit confused as to the possible implementation of a web scraper. Currently, I am attempting to write the website in HTML 5, CSS 3, and JavaScript. Would I need to use a server-side scripting language in order to do a web scraper? And if so, how would that language interact with the HTML and other code? Or would it replace it entirely? Help would be much appreciated
  4. craigymack

    Email html

    Hi Guys, I have a slight problem with some of my code. I have a series of tables running down a page with each table containing different data. All looks fine when I look at it as a HTML page but when I use it as an Email 2/3 elements move for some reason, is there a way I can make sure these elements won't move? The code is in the backend of a program I use and gets called as Emails are generated for different subjects. Thanks in advance, Craig.
  5. I was reading the tutorial for creating an accordion here: http://www.w3schools.com/howto/howto_js_accordion.asp Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html): <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resposive Multi Level Horizontal Nav?</title> <!--nav styles--> <style> .show { display: block; } nav { width: 100%; float: left; font-family: 'Oswald', sans-serif; font-size: 100%; color: #252525; border-bottom: 4px solid #0069d4; border-top: 4px solid #0069d4; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; position: relative; } a { text-decoration: none; color: #fff; } li a { height: 60px; line-height: 60px; background-color: #fff; width: 120px; text-align: center; color: #252525; display: block; } li a:hover { background-color: #0069d4; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } /* submenu desktop */ ul.submenu { position:absolute; top:100%; display:none; } ul.submenu li { display:block; } ul.submenu li a { display:block; float:none; font-size: 100%; line-height:40px; height:auto; } ul li:hover ul.submenu { display:block; } /* open close mobile nav*/ #i-nav { display: none; float: right; padding: 20px 20px; } .expand_sub { display: none; float: right; } @media (max-width: 1024px) { nav { width: 100%; padding: 0; margin: 0; } ul li { display:block; } ul { width: 100%; display: none; } li a { width: 100%; text-align: center; float: left; } #i-nav { display: block; } .expand_sub { display: block; } ul.submenu { position:relative; top:0%; display:block; } ul.submenu li { display:block; } ul.submenu li a { width: 100%; float: left; } } </style> <!--google fonts--> <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <!--font awesome--> <link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" /> </head> <body> <nav> <div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div> <ul id="menu"> <li><a href="#">HOMEPAGE</a><li> <li><a href="#">PROGRAMS</a> <ul class="submenu"> <li><a href="#">Program 1</a></li> <li><a href="#">Program 2</a></li> <li><a href="#">Program 3</a></li> </ul> </li> <li><a href="#">MEMBERSHIP</a><li> <li><a href="#">NEWS</a><li> <li><a href="#">GALLERY</a><li> <li><a href="#">CONTACT</a><li> </ul> </nav> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- script to toggle mobile menu --> <script> $(document).ready(function(){ $('#i-nav').click(function(){ $('#menu').toggleClass('show'); }); }); </script> </body> </html>
  6. I'm building a simple according from a w3 guide and I can't seem to get it to work on my wordpress website. Guide: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol I continue to get this error: (index):474 Uncaught TypeError: Cannot read property 'classList' of nullacc.(anonymous function).onclick @ (index):474 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function () { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } } I'm just learning javascript so I'm new to this but I can't see what is wrong with this code. Active works just fine but the stuff highlighted in red keeps giving me errors and nothing drops down.
  7. Hello,I am trying to create a web comic aggregation website using HTML 5, CSS 3, and JavaScript. I would like users to be able to view comics of different dates from different websites all in one place. After some research, it seems like I'm probably going to need to use an RSS feed to accomplish this. However, I don't fully understand the capabilities and usage of an RSS feed. First, would it be possible to pull images from comic websites in an automated and orderly fashion using an RSS feed? Or would I need to use something else? Or would it not be possible at all? If it is possible with an RSS feed, I'm also confused somewhat about the general implementation. Would the code for the feed be in HTML, or JavaScript, or both? Would I need to use existing libraries and or APIs? Is their existing code with a similar enough function that I could use it as a starting point? Thanks
  8. Hi, I need your help please, I have created a button element in the HTML file, to which assigned the "click" event with a jquery code in a java script file. The problem is that.. when the page is loaded for first time and I open the login form when I press the login button my form close suddenly and it shows "?#" at the end of the URL, I don't know why happens this and I appreciate your help. thanks a lot.
  9. I'm using the W3Schools Slideshow example here: http://www.w3schools.com/howto/howto_js_slideshow.asp I have links on a different page, and I'd like each of those links to open the slideshow page on a specific slide. Is there a simple way to do this without rewriting much of the existing HTML/JavaScript/CSS?
  10. I was wondering if there is a way to detect when a certain image is in a certain area on a page. I'm making a little game where you move a character around (which is an image), and when any part of the character is over a certain 100x200px area, it activates a function. Is this possible with JavaScript? If not, can I do it with another language that works with JavaScript and html? I'd prefer JavaScript. Thanks!
  11. Hello all, I have an SPA with a UI element akin to a directory tree (the grey column on the left) which allows the users to navigate the site's main content: The base of the code is implemented in the following HTML/CSS: <ul id="nav"> <li class="i"> <a href="Services">Services</a> <ul class="d"> <li> <a href="Services/Certificates">Certificates</a> </li> <li class="i"> <a href="Services/Responsabilities">Responsabilities</a> <ul class="d"> <li> <a href="Services/Responsabilities/Transportation">Transportation</a> </li> <li> <a href="Services/Responsabilities/Hospitality">Hospitality</a> </li></ul></li></ul></li> <li class="i"> <a href="Encyclopedia">Encyclopedia</a> <ul class="d"> <li> <a href="Encyclopedia/Society">Society</a> </li> <li> <a href="Encyclopedia/Arts">Arts</a> </li> <li> <a href="Encyclopedia/Technology">Technology</a> </li></ul></li> <li class="i"> <a href="Activities">Activity</a> </li></ul> .i,.i>.d {position:relative} .i>.d {display:none} .i:hover>.d {display:inherit} The <ul>s behave as intended on hover; the objective here is to work out a solution which will override '.i>.d {display:none}' when the user clicks on an <a>. That way, the user's current location in the website will be evident just from the links which are visible - like the left pane of File Manager on Windows. Now, since CSS doesn't have any parent selectors, I must resort to using JavaScript Event Listeners to listen for clicks on an <a> and style the relevant parents accordingly. To update the displayed location on the click of an <a>, all styles in #nav must be reset to default, and then the parents of the <a> that was clicked on must be styled through event propagation. It turns out that the capturing mode is best because then I can implement a clearing routine on the #nav, and the relevant '.i's and '.d's will get the event and handle it, bug-free. Only problem is, AFAIK, only event listeners which are added dynamically can catch events in the capture phase. This means I must do a big: 'use strict'; var nav=document.getElementById('nav'), navd=nav.getElementsByClassName('d'); /* event listeners defined here */ nav.addEventListener(reset,'click',true); for (i=navd.length; i-- navd[i].addEventListener(set,'click',true); in the global scope of a loaded and deferred .js script - which works perfectly, but is just plain ugly. Is there any alternative which would allow me to do this statically (i.e. embedded in the HTML)? Or I can't do any better? P.S. Don't mind the weird content and don't google it - it's not online yet. P.P.S. I posted it here because the issue is with DOM event handling and propagation; if I should put this under scripting or some other topic, please let me know. P.P.P.S. Sorry for the long post - here's a potato
  12. Greetings collegues, having these codes below: This reading the data from MySQL DB and fill it on select (don't screw the teachers are pretending to use this method) The next one is the query. The problem is if I try to select for example 2016. In my phpMyAdmin database I retrieve the value 2032. So to select some data I need to make some difference about 16 - and it works. THe problem is the registration. When I try to insert a new user (student whatever it is) and if I select 1985 on my DB results 0000, meanwhile the insert something anno_maturita = $casellaAnnoScolastico - 16 (it works). <select name="casellaAnnoScolastico" title="Anno Maturità"> <?php include "../connect/connetti.php"; $conn = new mysqli("localhost", "root", "", "archivio_studenti"); echo '<option value="none">Nessuno</option>'; $query = "SELECT ID, anno FROM annoscolastico ORDER BY ID ASC "; $result = mysqli_query($conn, $query); while ($row = $result->fetch_assoc()) { unset($id, $name); $id = $row['ID']; $anno = $row['anno']; echo '<option value="' . $id . '">' . $anno . '</option>'; } ?> </select> $query = "INSERT INTO utenti_studenti (nome, cognome, password ,via_piazza,n_civico,cap, localita, anno_maturita, voto_maturita, email, telefono , confermato, cod_azienda) VALUES ('$nome','$cognome','$password','$via_piazza','$n_civico','$codice_cap', '$comune','$casellaAnnoScolastico'-16,'$votoMaturita','$email','$telefono', 1, '$casellaAzienda')"; $risultato = mysqli_query(new mysqli("localhost", "root", "", "archivio_studenti"), $query); INSERT INTO utenti_studenti (nome, cognome, password, via_piazza, n_civico, cap, localita, anno_maturita, voto_maturita, email, telefono, confermato, cod_indirizzo_studio, cod_azienda, cod_facolta) VALUES('phpstorm', 'jetbrains', 123123123, 'via', '15', 151515, 'Munchen', '2016'-16, 100, 'email@email.it', 393462133945, 0, NULL, NULL, NULL);
  13. Here is my code. I have two arrows and they go to the next 'slide' and previous 'slide'. For someone reason clicking the buttons doesn't 'switch slides'. Is there anything wrong? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <style> body{ background-color: black; } h3{ color: white; font-family: corsiva; text-align: center; } .maindiv{ height: 450px; width: 800px; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 50px; } #leftarrow{ height: 40px; width: 100px; border: 2px solid black; margin-top: 140px; margin-left: 100px; color: black; text-align: center; font-size: 20px; background-color: black; } #rightarrow{ height: 40px; width: 100px; border: 2px solid white; margin-top: -140px; margin-left: 600px; color: white; text-align: center; font-size: 20px; background-color: black; position: absolute; } #image{ height: 250px; width: 300px; border: 2px solid white; margin-top: -150px; margin-left: 250px; } #explanation{ height: 100px; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid white; margin-top: 20px; } </style> <script> $(document).ready(function(){ var slide = 0; $('#rightarrow').click(function(){ slide = slide + 1; if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); $('#leftarrow').click(function(){ slide = slide - 1; if (slide = 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css("color", "black").css("border", "2px solid black"); } if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); </script> <body> <h3><u>Life Cycles of Stars</u></h3> <div class = 'maindiv'> <button id = 'leftarrow'>Previous</button> <div id = 'image'></div> <button id = 'rightarrow'>Next</button> <div id = 'explanation'>Animation</div> </div> </body> </html>
  14. <?php include "connetti.php"; session_start(); $query = "SELECT id_studente, nome, cognome, anno_maturita, voto_maturita FROM utenti_studenti WHERE utenti_studenti.confermato = 0"; $risultato = @mysql_query($query); if (mysql_num_rows($risultato) == 0) { echo("Nessun elemento trovato"); header("refresh:3;url=AreaAmministratore.phtml"); exit(); } ?> <html> <head> <title>Annuario Studenti</title> <link rel="stylesheet" href="cssUtils/aggiungi_properties.css"/> <script type="text/javascript" src="jsUtils/jsUtils_annuario/annuario_properties.js"></script> </head> <body> <form method='post' action='confermaStudenti.php' name='aggiornaStatoStudente'> <div align='center'> <table class='tg'> <tr> <th class='tg' style='color: #000;'>ID</th> <th class='tg' style='color: black'>Nome</th> <th class='tg' style='color: black'>Cognome</th> <th class='tg' style='color: black'>Anno Maturita</th> <th class='tg' style='color: black'>Voto Maturita</th> <th class='tg' style='color: black'>Accetta</th> </tr><?php while ($row = @mysql_fetch_assoc($risultato)) { echo " <tr align='center'> <td class='tg' style='color: black'>" . $row['id_studente'] . "</td> <td class='tg' style='color: black'>" . $row['nome'] . "</td> <td class='tg' style='color: black'>" . $row['cognome'] . "</td> <td class='tg' style='color: black'>" . $row['anno_maturita'] . "</td> <td class='tg' style='color: black'>" . $row['voto_maturita'] . "</td> <td class='tg' style='color: black'>" . "<input type=\"hidden\" name=\"rifiuta\"/><input type=\"checkbox\" name=\"accetta\"/>" . "</td> </tr>"; } ?> </table> </div> <div align='center'> <a href='AreaAmministratore.phtml'>Torna indietro.</a> <input type='submit' value='Prosegui'/> </div> </form> </html> <?php session_start(); include("connetti.php"); if (isset($_POST["accetta"])) { $accetta = 1; } else { $accetta = 0; } if ($accetta) { $cognome = $_POST['cognome']; $nome = $_POST['nome']; $id_studente = $_POST['id_studente']; $query = "UPDATE utenti_studenti SET confermato='1' WHERE nome='$nome' AND cognome='$cognome' AND id_studente='$id_studente'"; $risultato = @mysql_query($query) or die('<p align="center">Errore!</p>' . mysql_error()); echo("<script>alert('La modifica eseguita')</script>"); header("refresh:0;url='AreaAmministratore.phtml'"); } else { echo "<script>alert('Errore');</script>"; header("refresh:0;url='AreaAmministratore.phtml'"); exit(); } ?> Greetings guys, could you help me with those codes above? Cuz I can't understand why it doesn't work... So I have an table with the users that not confirmed. So to confirm them I've made checkbox, so on the other side I have a control if the checkbox is checked so I need to update some values on my database right ? Well it doesn't work....
  15. I have a bunch of buttons with words under each all beside each other across the page because they each have a div tag making them float to the left. I added a margin attribute thing (I don't know what's it called) with the div so the button weren't touching. I made it so when you click a button, it made is so the button and the words under it disappeared (style.display = "none"). The problem is that when it disappears, it still shows the margin for it, so every time you click a button and the ones to the right move left after it disappears, the left side of the next button isn't where the left side of the one clicked was. I am wondering is there is a way I can hide or take away its margin when it disappears. After you click more, there a big space between the button and the side of the screen. I am explaining this as good as I can. I can't easily show you what I mean.
  16. Hello everyone, I am a new member. I have a personal blog. Last night, My blog was a confusing error. After I edit my article,my Sidebar suddenly pushed down the index page. I do not understand why ? I did not edit the html of your blog. I was sit one night to try editing, but still failed. I need help now. Please help me. - This is my blog : http://newstrafficmonsoon.blogspot.com/ - This is screenshot Sorry because I'm not good at english Thank you. God bless all
  17. siam

    Please Help

    I decide to create a social site and want to income from my site. but i don't know how can i income from my site without useing any advertisement. have any best hosting company and domain company, can pay their client for using there service ? please help.
  18. I've just created a really simple online editor for HTML, Javasacript and CSS in "w3schools tryit" style. I call it WePro. The title stands for Web Programming, so, it doesn't mean I'm a pro developer. Feedback are welcome as this is one of my lesson in learning web programming. Please visit: WePro Hit "Run" to execute. The Code area is draggable and you can toggle it by clicking the "WePro title above the page. Is this any good?
  19. I like to see w3schools do a tutorial or include materializecss framework on your excellent site. http://materializecss.com/
  20. if(trigger.getAttribute("onmouseover")) { document.addEventListener("mouseover", function(event) { if(event.target !== elem && event.target !== elem.parentNode) { if(elem.style.opacity == 1) fadeOut(x); } }, false) } The code above is not working properly as it is supposed to. I have a trigger element which is event.currentTarget. When the user hovers over the trigger item the elem is display. What I am looking for is that when the user hover over anything else on the page except the trigger and the elem items the elem should fade out. The code works fine when I use onmouseenter event; however, that is not supported in safari and some older versions of other browsers as well. Therefore, please help with this I have been stuck at this problem for days now and there is no good online resource for it as well. Thanks! in advance... Sam
  21. Dear Members, I am trying to develop a Responsive Slideshow using w3.css only. Don't want to use any other plugin. I want to achieve (http://www.free-css.com/free-css-templates/page193/mpurpose ) This effect. Below is the code it works not smooth enough though in desktop environment but fails when resize the browser window. <div class="w3-container w3-padding-16" style="position:relative"> <div class="w3-row"> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg1.jpg" style="max-width:100%;" > <div class="w3-container w3-orange"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Garments </b></h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"><i>Fashions Aperals OutFits Weres </i> </h1> </div> <img src="Images/12246_ultramarine_blue_b.jpg" style="position:absolute;top:25%;right:10%;width:10%" alt="Portfolio 4"> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg3.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Color Schemes </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Comes with various color schemes </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> <div class="w3-display-container mySlides w3-animate-right"> <img src="Images/homepage-slider/slider-bg4.jpg" style="max-width:100%;"> <div class="w3-row w3-col m4 l4"> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middleleft"> <b> Feature Rich </b> </h1> <h1 class="w3-text-white w3-xxlarge w3-serif w3-animate-zoom w3-display-middle"> <b> Huge amount of variations! </b> </h1> </div> <div class="w3-display-topright" > <img src="Images/12240_burnt_olive_b.jpg" class="w3-padding-16" style="width:70%" alt="Portfolio 4"> </div> </div> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 4000); } </script> </div> May kindly help.
  22. Hi, I need a tutorial (in .pdf) on how to make a login page for a web app and secure password database using MS Access. Do you have any reference? Thanks!
  23. I'm trying to change the text color scheme of the following, plus i would also like to bold. Web page displays (just text) but only (Update cart) is linked: Update cart or This is the code for above: <input type="submit" id="update-cart" name="update" value="{{ 'cart.general.update' | t }}"> "cart": { "general": { "title": "Cart", "update": "Update cart", "or": "or", "checkout": "Check out", The "Check out" is a Button (I didn't include code, because I didn't want to change it) I'm not sure what tag(s) I should use, I've tried <h3>, <h3 style>, <div>, <div style>, <span> and they all give me errors. I'm editing within Shopify html editor, they use (.liquid) top code, and (.json) bottom code Any suggestions would be much appreciated, thanks so much.
  24. Hello developer HTML, See title. Here is the link to the aspect of the problem. I wish to neutralise the white field. Inline (loc. var there) style attribute background color: not working.
  25. lease see my code below, I have sorted out all my coding to work how I want it too, but for some reason I just can't get it to load the map when you open it up in a browser. Can anyone see where I have gone wrong and guide me to get it work please. Thank you. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title>County Polygons + Markers w/elapsed time</title> <script src="../fiveenglishcounties.js" charset="UTF-8"> // positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk </script> <script type="text/javascript"> var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin; $('#controls input[name="[counties]"]').click(function(){ var poly = pollies[this.value]; if(poly.map){ poly.infowindow.close(); poly.setMap(null); this.checked = false; } else { poly.setMap(map); this.checked = true; } }); function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); $('#activatemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setIcon(pinImage); return false; } }); }); $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } tm.get(0).size = $('option', tm).length; }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); this.size = $('option', $(this)).length; }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.178227, -0.46013)); map.setZoom(8); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(8); } }); function formatCodes(codeString){ var a = codeString.split(' '), l = a.length, po; while(--l > -1){ po = a[l].split(','); a[l] = {lat: +po[1], lng: +po[0]}; } return a;} function initMap() { pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor); defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor); var p; geocoder = new google.maps.Geocoder(); bounds = new google.maps.LatLngBounds(); map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 52.178227, lng: -0.4013}, mapTypeId: google.maps.MapTypeId.ROADMAP }); pollies = { Bedfordshire: { paths: BedfordshireCodes, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.15, latlng: {lat: 52.002974, lng: -0.465139} }, Bedford: { paths: BedfordCodes, strokeColor: '#FFC0CB', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFC0CB', fillOpacity: 0.15, latlng: {lat: 52.135973, lng: -0.466655} }, Hertfordshire: { paths: HertfordshireCodes, strokeColor: '#FFFF55', strokeOpacity: 0.9, strokeWeight: 2, fillColor: '#FFFF55', fillOpacity: 0.25, latlng: {lat: 51.809782, lng: -0.237674} }, Cambridgeshire: { paths: CambridgeshireCodes, strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.15, latlng: {lat: 52.305297, lng: 0.021820} }, Northamptonshire: { paths: NorthamptonshireCodes, strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.15, latlng: {lat: 52.272994, lng: -0.875552} } }; for(p in pollies){ var polly = pollies[p]; polly.paths = formatCodes(polly.paths); polly = pollies[p] = new google.maps.Polygon(polly); polly.infowindow = new google.maps.InfoWindow({ content: p, position: polly.latlng }); polly.addListener('click', function(){ if(this.infowindow.map){ this.infowindow.close(); } else { this.infowindow.open(map, this); } }); polly.setMap(map); } } function initialize() { } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form> <br> Location 1 <input type="text" class="address"> <br> <br> Location 2 <input type="text" class="address"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="submit" value="Submit"> </form> </div> <div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"> <label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br> <label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br> <label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br> <label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br> <label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label> </div> <div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br> <input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br> <input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker"> </div> </div> <div id="map"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div> </body> </html>
  • Create New...