Jump to content

abdallaham

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About abdallaham

  • Rank
    Newbie
  1. Hi, This link below is an example of select() method in jQuery but can someone tells me why the text is printed three times when I click the button: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_trigger
  2. I have a cordova/phonegap project and I want to navigate in the same index.html but give the impression to the user that he opened a new page? (Without ionic framework). I do not know if this can be done using simple HTML, CSS or javascript but appreciate if someone can provide me a help I put the following code in index.html but it does not give that impression: <div id="page_01"> <a href="#page_02">Press for Next step</a>> </div> <div id="page_02"> <p>New page for the user but it is in the same index.html</p> </div>
  3. Hi, I went through the example of creating a modal with tabbed content at the below link http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab however, the example shows one button that opens one modal. I tried to have two buttons in the same page which each one of them will show its own modal content but I got stock. The second button does not display its content unless I press on its tab. The code after I modify it looks like the following: (I also attached an image that shows the issue I am having) <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <style> .city {display:none} </style> <body class="w3-container"><br> <button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Tabbed Modal</button> <button onclick="document.getElementById('id02').style.display='block'" class="w3-btn">Open Tabbed Modal 02</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-padding-top">×</span> <h2>Header</h2> </header> <ul class="w3-pagination w3-white w3-border-bottom" style="width:100%;"> <li><a href="#" class="tablink" onclick="openCity(event, 'London')">London</a></li> <li><a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a></li> <li><a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a></li> </ul> <div id="London" class="w3-container city"> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="Paris" class="w3-container city"> <h1>Paris</h1> <p>Paris is the capital of France.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="Tokyo" class="w3-container city"> <h1>Tokyo</h1> <p>Tokyo is the capital of Japan.</p><br> </div> <div class="w3-container w3-light-grey w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display='none'">Close</button> </div> </div> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-blue"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-closebtn w3-padding-top">×</span> <h2>Header</h2> </header> <ul class="w3-pagination w3-white w3-border-bottom" style="width:100%;"> <li><a href="#" class="tablink" onclick="openCity(event, 'London2')">London</a></li> <li><a href="#" class="tablink" onclick="openCity(event, 'Paris2')">Paris</a></li> <li><a href="#" class="tablink" onclick="openCity(event, 'Tokyo2')">Tokyo</a></li> </ul> <div id="London2" class="w3-container city"> <h1>London 2</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="Paris2" class="w3-container city"> <h1>Paris 2</h1> <p>Paris is the capital of France.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="Tokyo2" class="w3-container city"> <h1>Tokyo 2</h1> <p>Tokyo is the capital of Japan.</p><br> </div> <div class="w3-container w3-light-grey w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id02').style.display='none'">Close</button> </div> </div> </div> <script> document.getElementsByClassName("tablink")[0].click(); function openCity(evt, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].classList.remove("w3-light-grey"); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html>
×
×
  • Create New...