Jump to content

Search the Community

Showing results for tags 'link'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. I've decided to share my post from the JavaScript forum here in case this is the more appropriate place. It's involving MODALS with Bootstrap & JQuery and my question is below. Thank you.
  2. Hello, if this is not in the appropriate forum (or has been addressed already), please advise and I will update accordingly. Thank you. I'm updating my ancient website and I decided to use MODALs for my page with videos which embed various videos from various video servers; YouTube, Vimeo, etc.): My website VIDEO page Using: W3.CSS + JavaScript + Bootstrap & JQuery If I wanted to reference a specific video modal from a link (maybe sent in an email) or from another webpage (and have the modal automatically open), how do I do that? I found some code on the web using window.location.hash and it's included in my code at the end, but this does not do what I need (it's close though...). Thank you very much in advance 🙂 My code is below (including only 4 video modals, not all 55) <!DOCTYPE html> <html> <title>Julie Meitz Video & Film</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BOOTSTRAP & JQuery --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="../../css/style.css"> <body> <!-- Horizontal Navbar Main & Work --> <div class="w3-top"> <div class="w3-bar w3-white w3-card w3-border w3-left-align w3-large"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> <a href="../../index.html" class="w3-bar-item w3-button w3-padding-large">Home</a> <!-- <a href="../../index.html#about" class="w3-bar-item w3-button w3-hide-small w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Contact</a> --> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Multimedia</a> <a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-text-white w3-gray">Video</a> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Other</a> </div> <!-- Vertical Sidebar on small screens Main --> <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large" style="padding:10px 0px 10px"> <a href="../../index.html#about" class="w3-bar-item w3-button w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-padding-large">Multimedia</a> <!-- <a href="../videos_films/index.html" class="w3-bar-item w3-button w3-padding-large">Video</a> --> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-padding-large">Other</a> </div> </div> <!-- Video & Film --> <div class="w3-container" style="padding:80px 16px 40px"> <div class="row"> <!-- Using a href (with image) to trigger modal --> <!-- Scrap Video # 1 2017 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF10a" data-src="https://www.youtube.com/embed/bUzUflnktaU" data-vtitle="<a href='https://youtu.be/bUzUflnktaU' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL: Scrap Video # 1 (2017)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An experimental video created from unused video. 2015 : Video of myself on my 49th birthday while testing green screen and involved in art therapy. 2016 : Attempted to work with footage again and applied a Photoshop filter, short video made, but not interesting enough to publish (and too personal). 2017 : Tired of trying to figure out what to do with this footage, so I made this 'scrap' video, including sound effects. Now it's time to get it off my hard drive.</p> <p class='big'><b>Video:</b> Julie Meitz / Vaulx-en-Velin, France 2017</p> <p class='big'><b style='color: red'>Note:</b> This video was not shown at screenings/festivals, I just made it for myself.</p> <p class='big'><b>Skills:</b> Conception, camera, editing, color & correction grading & visual effects</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/scrap-video-1-julie-meitz-0.jpg" alt="Scrap Video # 1" style="width:100%"> <div class="overlay"><div class="text2">Scrap Video # 1<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL</div></div></div> </a> </div> </div> <!-- The Small World / Le Petit Monde 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF1" data-src="https://www.youtube.com/embed/agsb-sXB3L4" data-vtitle="<a href='https://youtu.be/agsb-sXB3L4' target='_blank style' style='text-decoration: underline'>Promotional Video: Le Petit Monde / The Small World (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> A promotional video for the international private school <a href='https://lepetitmonde.org/' target='_blank style' style='text-decoration: underline'>Le Petit Monde.</a></p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://incompetech.com/' target='_blank style' style='text-decoration: underline'>Kevin MacLeod - Life of Riley</a> / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, direction, camera, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/le-petit-monde-julie-meitz-0.jpg" alt="The Small World / Le Petit Monde" style="width:100%"> <div class="overlay"><div class="text2">Le Petit Monde /<br>The Small World<hr><div style="letter-spacing: 2px;font-size: 15px">PROMOTIONAL</div></div></div> </a> </div> </div> <!-- DR VoltairEAM / Dream Voltaire (Video Only) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF9" data-src="https://www.youtube.com/embed/zXQ1PCZeeIY" data-vtitle="<a href='https://youtu.be/zXQ1PCZeeIY' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL Video Mapping: DR VoltairEAM / Dream Voltaire (Video Only) (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An original & remix work about Voltaire for the <a href='https://www.ferney-voltaire.fr/' target='_blank style' style='text-decoration: underline'>Fête de Voltaire</a>. Made in a dreamlike, surreal, kitsch and political style using excerpts from his book, Micromegas, various related images and films, historical information and statistical data from Standford University. The video was mapped to Voltaire's old theater, La Maison Fusier.</p> <p class='big'><b>Video:</b> Julie Meitz (artist residency) / <b>Artistic Direction:</b> <a href='https://mobilhomme.weebly.com/' target='_blank style' style='text-decoration: underline'>Mobil'Homme: Philippe Pellier</a> / <b>Credits:</b> <a href='docs/Credits-Dr-Voltairem-Julie-Meitz-2016.txt' target='_blank style' style='text-decoration: underline'>Various AV Sources</a> / <b>Other:</b> <a href='../multimedia_shows/2016-06-voltaire/dr-voltaiream-2016_julie-meitz.pdf' target='_blank style' style='text-decoration: underline'>Program</a> / <a href='../multimedia_shows/2016-06-voltaire/index.html' target='_blank style' style='text-decoration: underline'>MULTIMEDIA VIDEO MAPPING: Photos, info...</a> / <a href='https://flic.kr/s/aHskDg1jLF' target='_blank style' style='text-decoration: underline'>Photos</a> / Ferney-Voltaire, France 06/2016</p> <p class='big'><b>Skills:</b> Conception, research, animation, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art (& Video Mapping)</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (Video Mapping: Resolume Arena 5)</p>"> <img src="images/dr-voltaiream-julie-meitz-0.jpg" alt="DR VoltairEAM / Dream Voltaire" style="width:100%"> <div class="overlay"><div class="text2">DR VoltairEAM /<br>Dream Voltaire<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>Video Mapping</div></div></div> </a> </div> </div> <!-- Electro-Volution Extracts (iKICK! / VJ + DJ) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF2" data-src="https://www.youtube.com/embed/87rzhcq3Ozg" data-vtitle="<a href='https://youtu.be/87rzhcq3Ozg' target='_blank style' style='text-decoration: underline'>Promotional Art Video VJ + DJ: Electro-Volution Extracts for iKICK! (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An experimental black & white video made for my performance with <a href='https://fr-fr.facebook.com/ikick.djamency.atix/' target='_blank style' style='text-decoration: underline'>iKICK!</a>, DJs D'Jamency and Atix. During the performance individual clips of this footage were triggered live in my VJ application, sometimes with VJ effects, sometimes superimposed, etc. This video is a reconstruction of the original footage (which I lost) rebuilt with the VJ DXV files scaled up and synced to the audio.</p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://soundcloud.com/ikick-live' target='_blank style' style='text-decoration: underline'>iKICK! - Techno Live Project</a> / <a href=../vj_fj/images/ikick-julie-meitz-tannerie-2016-fly.jpg target='_blank style' style='text-decoration: underline'>Flyer</a> / <a href='https://flic.kr/s/aHsmXgKBnn' target='_blank style' style='text-decoration: underline'>Images</a> / <a href='https://youtu.be/V2x7l6JneXc' target='_blank style' style='text-decoration: underline'>iKICK! & Julie Meitz Live</a> / Producer: AsenseProd / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, animation, editing, correction grading, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (VJing: Resolume Arena 4 + nanoKONTROL + AKAI LPK25)</p> <p class='big'><b>Related:</b> <a href='https://youtu.be/raU4ltDuxmc' target='_blank style' style='text-decoration: underline'>iKICK! promotional video</a></p>"> <img src="images/electro-volution-julie-meitz-0.jpg" alt="Electro-Volution" style="width:100%"> <div class="overlay"><div class="text2">Electro-Volution<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>VJ + DJ</div></div></div> </a> </div> </div> <!-- OTHER VIDEO MODALS REMOVED--> <!-- Modal Bootstrap JS jQuery--> <div class="modal fade" id="vfModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <!-- <h5 class="modal-title"><a href="https://youtu.be/agsb-sXB3L4" target="_blank style" style="text-decoration: underline">Video: The Small World / Le Petit Monde</a></h5> --> <h5 class="modal-title" id="exampleModalLabel"></h5> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" id="video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="video-desc"></div> </div> </div> </div> </div> </div> </div> <!-- SCRIPTS --> <script> // Used to toggle the menu on small screens when clicking on the menu button function myFunction() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function() { // Gets the video src from the data-src on each a href="#" var $videoSrc; $('.video-link').click(function() { $videoSrc = $(this).data( "src" ); }); console.log($videoSrc); $('#vfModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // button that triggered the modal (but I'm using a href link! but it seems to work?...) var vidTitle = button.data('vtitle') // Extract info from data-* attributes var vidDesc = button.data('vdesc') var vidId = button.data('id') // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) //modal.find('.modal-title').html("<a href=https://youtu.be/agsb-sXB3L4 target='_blank style' style='text-decoration: underline'>Video: The Small World / Le Petit Monde</a>") modal.find('.modal-title').html(vidTitle) modal.find('.video-desc').html(vidDesc) // when the modal is open show video & add ?rel=0 to show only my videos when paused $("#video").attr('src',$videoSrc + "?rel=0" ); }) // when the modal is opened show video & add ?rel=0 to show only my videos when paused //$('#vfModal').on('show.bs.modal', function (e) { //$("#video").attr('src',$videoSrc + "?rel=0" ); //}) // stop playing the youtube video when modal is closed $('#vfModal').on('hide.bs.modal', function (e) { // Remove the src attribute (remove video) before closing modal $("#video").attr('src',''); }) }); </script> <script> // Sending a link from an external page - this only works sending the same modal, how to get it to pick up a specific video modal??? $(document).ready(function() { var modals = ['#vfModal']; if (window.location.hash && ~modals.indexOf(window.location.hash)) { $(window.location.hash).modal(); } }) </script> </body> </html>
  3. Hi anyone, I was looking for a possibility to link to a .html file wich defines everythin what I want to put into the <head> tags. Just like linking to a stylesheet. Just to avoid adaptation in each file, when something changes in the head. If I could link to a file that describes the "head" I would only need to chang it in one file. Basically the same idea as for stylesheets actually. Does anybody have a good practice here?
  4. I followed the tutorial to create an accordion. Now, I would like to link to individual headers in that accordion and have them load opened. How can I edit the code to do this? Here is what I'm using: <style type="text/css">.accordion { background: none; color: #3d8bb1; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 18px; font-weight: bold; transition: 0.4s; } .active, .accordion:hover { background: none; color: #2e6885; } .accordion:after { content: '\002B'; color: #2e6885; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="accordion">TITLE</button> <div class="panel"> <p> CONTENT</p> </div> <button class="accordion">TITLE</button> <div class="panel"> <p>CONTENT</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>
  5. Hi. How can I open the read more link in a new page. Just like Facebook when you click on the continue reading, it shows the current clicked post in a new page.
  6. Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed. However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: Services Page HTML: <div class="col"> <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green"> <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div> </div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button> </div> Current Javascript: <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"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); }); </script> Home page link needs to go to both the services page, and open up a specific <button>. Ie. <button class="tablinks" onclick="openCity(event, 'clinical')"> I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!
  7. I am creating a re-usable email template. I am not sure if this can be done but wanted to throw it out there and see if anyone had any ideas. I have a button with a link to a form. The link pre-fills fields in the form with merge tags in the url. I need to make/create a "placeholder" for one of the tags so that I can edit/insert different values as needed. Is this possible with HTML? This all resides in PARDOT, which does have a WYSIWYG editor. When I click on the lick I can pull up the WYSIWIG and change attributes etc. I would love to be able to click the link and have an "Event ID" that would change the portion of the link containing "Event ID" to what I need so that when clicked it pre-fills the field on the form with the correct "Event ID". Everything works fine, I am just trying to find a way to make it easier for the end user when utilizing the template. Hopefully this isn't too vague and I have illustrated what I am trying to do. Thanks!
  8. REQUEST: Please compare the following two links: one works and the other does not. LINK ONE (functional): This link is accessed by going to the Grammar Captive mainpage and clicking on the words Weekly Podcast under the Products heading in the navigation bar. When the panel opens find the phrase Click and Listen. You should be redirected to the podcast_hostpage. LINK TWO (dysfunctional): This is accessed by going to the mainpage and clicking on the word Podcasts under the heading Search Grammar Captive in the navigation bar. When the panel opens search for the single word podcast. A list of options should become available. Click on the phrase Discover more ... under any of them. When the hidden data appears click on the phrase Click and Listen. Nothing happens. DISCUSSION: Both links (LINK ONE and LINK TWO) are identical in every way, but the query strings. One works, the other does not. With the exception to some problematic links to Facebook created by jSocials the console indicates no error. Interestingly, in the dysfunctional case the timer runs as if an infinite loop had been created. Careful scrutiny of the code yields no common source of error. QUESTION: What is likely causing LINK TWO to fail? (function() { $(".SearchButton").click(function() { /******************************************************* Displays error message, if no input is present when the submit button is clicked. Hides the error message when a proper search is initiated. *******************************************************/ var search_podcast_input = $("#podcast_input").val(); if (search_podcast_input == "") { $("#podcast_input_error").show().append('<br />'); $("#podcast_input").focus().focusout(function() { $("#podcast_input_error").hide(); }); return false; } var dataString = 'search_input=' + search_podcast_input; $.ajax({ type: "POST", url: './_utilities/php/search_podcast.php', data: dataString, dataType: 'JSON', statusCode: { 404: function() { alert( "Page not found" ); }}, success: function (jsonData){ $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_list.css" }).appendTo("head"); $("<link/>", { rel: "stylesheet", type: "text/css", href: "./_utilities/css/podcast_select.css" }).appendTo("head"); $('#podcast_matches').html(''); $('#podcast_matches').css({'background-color':'#fff','background-image':'none'}).html("<p>Your Search Results for [ <span style='font-weight:bold;'>" + search_podcast_input + "</span> ] in descending order of matched relevance are:</p>"); $.each(jsonData, function(key, object){ $('#podcast_matches').append("<div class='paginate'><div class='item_info podcast_item'><div class='pod_num'>" + object.podcast_no_item + "</div><div class='pod_title'>" + object.item_title + "<br /><span class='pubdate'>" + object.item_pubdate + "</span></div></div><div class='pod_describe'>" + object.item_description + "</div><div class='discover'><span class='discover_text'>Discover more ...</span></div><div class='hidden_info'><div class='podcast_link'><a href='podcast_hostpage.php?hash=" + object.item_guid + "&podcast_no=" + object.podcast_no_item + "' title='' target='_self'>Click and Listen</a></div><div class='duration'>Duration: " + object.itunes_duration + "</div><div class='summary'><h2>Summary</h2>"+ object.itunes_summary + " </div></div><!-- end div.hidden_info --><hr class='hr_divide' /></div><!-- end div.paginate -->"); }); var collection = $(".paginate"); var collNum = collection.length; var perPage = 3; collection.slice(perPage).hide(); $('#podcast_matches').append("<div id='pagn'></div><!-- end div#pagn -->"); $("#pagn").pagination({ items: collNum, itemsOnPage: perPage, cssStyle: "light-theme", onPageClick: function(pageNum) { var start = perPage * (pageNum - 1); var end = start + perPage; // console.log(event); // console.log(pageNum); collection.hide().slice(start, end).show(); $('body, html').animate({scrollTop: $('#podcast_matches').offset().top},800); } }); /******************** BEGIN PODCAST INSERT ********************/ $("div.discover").mouseover(function() { $(this).find("span.discover_text").css({"cursor": "pointer","line-height":"1.6em","font-size":"1.4em"}); }); $("div.discover").click(function() { $(this).next("div.hidden_info").slideToggle(800, function() { $('.podcast_link').find('a').on('click', function(event){ event.preventDefault(); var attribute = $(this).attr('href'); var href_arr = attribute.split('?'); var query_str = href_arr[1]; var pairs = query_str.split('&'); var data = []; $.each(pairs, function(i, v){ var pair = v.split('='); var key = pair[0]; var value = pair[1]; var data_arr = [key, value]; data.push(data_arr); }); }); }); $(this).mouseup(function() { $(this).css({"color": "#ccc", "font-weight": "normal"}); }); $('body, html').animate({scrollTop: $(this).offset().top},800); }) .mouseout(function() { $("span.discover_text").css({"cursor":"auto","line-height":"1.6em","font-size":"1em"}); }); /******************** END PODCAST INSERT ********************/ }, complete: function(jqXHR, status) { if (status === 'success') { var aside_height = $('aside').height(); $('#main').css('min-height', aside_height); $('#pagn').show(); } selfSearchResults_Podcast = $('#main').html(); } }); }); })(); Please advise. Roddy
  9. I have been struggling to figure out how to and a link on a rotating block menu. Nothing I seem to do creates the desired effect.... HELP! I'm pulling my hair out on this one. I want to make the content Labels links. CSS: *,*:before,*:after { box-sizing: border-box; } :after { content: ""; link: ""; } nav { float: left; position: relative; top: 13px; left: -13px; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 69px; cursor: pointer; background: crimson; color: white; text-transform: uppercase; transition:all .5s ease-out; } nav ul li:after { position: absolute; background: black; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .5s ease-out; } nav ul li:nth-child(1):after { content: "BIO"; line-height: 69px; } nav ul li:nth-child(2):after { content: "DISC"; line-height: 69px; } nav ul li:nth-child(3):after { content: "VIDEO"; line-height: 69px; } nav ul li:nth-child(4):after { content: "SHOWS"; line-height: 69px; } nav ul li:hover { transform: translateX(-69px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 24px 0; background: transparent; } nav ul li div { position: relative; } MENU HTML: <section id="menu"> <nav class="navbar-fixed-top"> <ul> <li> <div style="font-size: 1.25rem;" class="icon-notebook"></div> </li> <li> <div style="font-size: 1rem;" class="socicon socicon-play"></div> </li> <li> <div style="font-size: 1.25rem;" class="etl-icon icon-video"></div> </li> <li> <div style="font-size: 1.25rem;" class="icon-global"><div class="nav ul li"></div> </li> </ul> </nav> </section>
  10. Hey Guys, I am having issues with making my links work. I am taking a template that I like and i am trying to change from the original template in the NAV pop-out bar from a data-scroll to a direct link to the new page instead of the data-scroll. The top one is the original and the bottom is my modification page. Current style CSS3 attached as amended. Notepad++ Moderno by Graphberry (template) <nav class="menu"> <a href="#" class="close"><i class="fa fa-close"></i></a> <h3>Menu</h3> <ul class="nav"> <li><a data-scroll href="#Palidin">Palidin</a></li> <li><a data-scroll href="#services">Service</a></li> <li><a data-scroll href="#Products">Products</a></li> <li><a data-scroll href="#Company Bio">Company Bio</a></li> <li><a data-scroll href="#Technicians">Technicians</a></li> <li><a data-scroll href="#Buyers Guide">Buyers Guide</a></li> <li><a data-scroll href="#Downloads">Downloads</a></li> <li><a data-scroll href="#Contract">Contract</a></li> </ul> <ul class="social-icons"> <li><a href="https://www.facebook.com/CK-Custom-148723225148419/"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/thomas25fry"><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-dribbble"></i></a></li> <li><a href=""><i class="fa fa-behance"></i></a></li> <li><a href=""><i class="fa fa-pinterest"></i></a></li> </ul> </nav> ___________________________________________________________________________________________________________________________ <nav class="menu"> <a href="#" class="close"><i class="fa fa-close"></i></a> <h3>Menu</h3> <div id="navitabs"> <ul class="nav"> <li><a class="navitab" href="index.html">Palidin</a></li> <li><a class="navitab" href="Services.html">Service</a></li> <li><a class="navitab" href="Products.html">Products</a></li> <li><a class="navitab" href="Companybio.html">Company Bio</a></li> <li><a class="navitab" href="Technicians.html">Technicians</a></li> <li><a class="navitab" href="Buyersguide.html">Buyers Guide</a></li> <li><a class="navitab" href="Downloads.html">Downloads</a></li> <li><a class="navitab" href="Contracts.html">Contract</a></li> </ul> <ul class="social-icons"> <li><a href="https://www.facebook.com/CK-Custom-148723225148419/"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/thomas25fry"><i class="fa fa-twitter"></i></a></li> <li><a href=""><i class="fa fa-dribbble"></i></a></li> <li><a href=""><i class="fa fa-behance"></i></a></li> <li><a href=""><i class="fa fa-pinterest"></i></a></li> </ul> </div> </nav> style.css
  11. Is there a way for creating a template in html (css/java/php) for having a tag/id with page name to be used into links? Something like: <head> #name="this_is_page_name" #folder="part_of_location" </head> <body> <a href="111111/#folder/222222_#name.html">...</a> </body> Thanks!
  12. So the first picture is my homepage(mt.hebronbaptistchurch.html) and the link box is the size i want it to be. The second picture is my pictures and videos page(picturesandvideos.html and the link size is increased and I have no clue why. I added a slideshow feature using CSS and I think it messed with the link box. Mt.hebronbaptistchurch.html News.html PicturesandVideos.html
  13. I am confused about the use of the <link> and <enclosure> subelements of the <item> subelement. The difference between the <link> subelements of the <channel> and <item> elements appears clear, but the difference between the <link> and <enclosure> subelements of the <item> subelement are difficult to understand. For example, if your RSS feed contained a long series of <item> subelements with each referring to a different podcast, why would you need both a <link> and <enclosure> for the same <item> subelement. <channel> <link></link> <item> <link></link> <enclosure></enclosure> </item> </channel>
  14. Hi! I am reading the HTML5 tutorial from www.w3schools.com. All the examples I've tried have worked well, but not the following one: I want to change the link colours of one of my pages. The "visited", "active" and "hover" are working, but not "link", I don't know why. Could anyone help? This is what I have put in a .css file: <style> a:link { color: black; background-color: transparent; text-decoration: none; } a:visited { color: red; background-color: transparent; text-decoration: none; } a:hover { color: green; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> Thanks!
  15. I have students creating sites that have multiple pages that link together through a nav bar and also have images with an external file source. When students send them to me obviously the images don't work because I don't have them saved in folders with their sites and also the links don't work to the other .htm pages for the same reason. My first thought was to have students send me all files so that they would all be in my downloads folder and in theory work. They work to an extent but images are distorted. My second solution was to use a zip file but that doesn't seem to work either. Any help with this is much appreciated.
  16. Hello internet. I am trying to use the following code and my webpage is not accepting my fadeOut function I'm using <link> to grab the jquery library from my server. CODE: $("div").click(function() { $(this).fadeOut("slow"); }); However, if I replace <script type="text/javascript" src="jquery.min.js"></script> WITH <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> It works just fine. Why is this? NOTES: 1. I am placing jquery code within my <head> tags. 2. jquery.min.js is the 3.1.0 compressed file I have on my server
  17. 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?
  18. RaRa3

    HTML

    Hello i have a problem with my HTML code I have a link to a file that is on my computer but everytime i click the link it leads to an error. I am not sure why because the both files are in the same folder and i have done it before, I put in a website and it does work so I am not sure why my HTML wont open the link when at the home page. This is my code <a href=“Login.html”>Log In</a> Did i do something wrong? the file is named Login.html just like in the quotations
  19. On home page [Website link] there is sliding celebrity Images : on click of any celebrity it takes to it resp. pages which is working on Desktop / laptop browser , i mean click - link working , but same if i open in Any Cell Phones then `sliding images` is shown but `images` is `not click able` and it not going to resp. page of celebrity.I am using `wp-roundabout-pro` ( https://wordpress.org/plugins/wp-roundabout-pro/ ) plugin in my website ( `WordPress 3.8.4` )i know the plugin is not support to current version of my word-press... but In Desktop / laptop browser all working prefect.any idea what is the issue. please help me out... as if this issue is not short-out then my whole work will be wasted Below is plugin code : <?php $anims = array('lazySusan', 'waterWheel', 'figure8', 'square', 'conveyorBeltLeft', 'conveyorBeltRight', 'diagonalRingLeft', 'diagonalRingRight', 'rollerCoaster', 'tearDrop', 'theJuggler', 'goodbyeCruelWorld'); if(!in_array($animation, $anims)){ $animation='conveyorBeltLeft'; $asclass = ''; } else { $asclass = 'class="hideflow"'; } $sid = 'rbt-'.uniqid(); $out = '<ul '.$asclass.' id="'.$sid.'">'; $fwidth = intval($data[opt1]); $fheight = intval($data[opt2]); while($row = mysql_fetch_assoc($res)){ if($row[url]!='' && trim($row[url])!=' '){ $img = '<img src="'.get_image_thumb($row[url], 'w='.$fwidth.'&h='.$fheight).'" />'; } else { $img = ''; } if($row[title]!='' && trim($row[title])!=' '){ //$ttlxz='<span class="rbt-title"><span>'.$row[title].'</span></span>'; $ttlxz=''; } else { $ttlxz=''; } if($row[desc]!='' && trim($row[desc])!=' '){ //$descxz='<span class="rbt-content"><span>'.$row[desc].'</span></span>'; $descxz=''; } else { $descxz=''; } $out = $out.'<li style="background-color:'.$row[color].'">'.$ttlxz.''.$descxz.'<a href='.$row[desc].'>'.$img.'</a></li>'; } $out = $out.'</ul> <style type="text/css"> #'.$sid.' { list-style: none; padding: 0; margin: 0 auto; width: '.$data[opt5].'px; height: '.$data[opt6].'px; } #'.$sid.' .roundabout-moveable-item { height: '.$fheight.'px; width: '.$fwidth.'px; background-color: '.$data[opt4].'; text-align: left; cursor: pointer; overflow:hidden; } </style> <script> jQuery(document).ready(function() { jQuery("#'.$sid.'").roundabout({ autoplay: '.$data[opt7].', autoplayDuration: '.$data[opt9].'000, minOpacity: '.$data[opt10].', maxOpacity: '.$data[opt11].', reflect: '.$data[opt12].', enableDrag: '.$data[opt13].', dragAxis:"'.$data[opt3].'", shape: "'.$animation.'", autoplayPauseOnHover: '.$data[opt8].' }); }); </script> '; ?> Sample of HTML code generated : <div class="slider"> <ul id="rbt-5428f4c10c934" class="hideflow roundabout-holder" style="padding: 0px; position: relative;"> <li style="background-color: rgb(238, 238, 238); position: absolute; left: 684px; top: 58px; width: 137.19px; height: 82.314px; opacity: 0.19; z-index: 117; font-size: 6.4px;" class="roundabout-moveable-item"> <a href="http://www.thefansworld.com/celebfanpage/shahrukh-khan/"> <img src="http://www.thefansworld.com/wp-content/plugins/wp-roundabout-pro/cache/w=300&h=180___Shahrukh-Khan-Magazine-Photoshoot.jpg"> </a> </li> </ul> </div> I taught my a link have some issue but my anchor link is seem to be perfect then why its not working in mobile phones. Also one user told me that on his/her mobile phone its working but i have checked in Samsung , Nokia , Sony ,Tabs all phones ..but its not working -- means image is not clickable ,where on desktop / laptop its working fine
  20. Hi All, This is my first post! I think this site is amazing. I love the little try it yourself windows. SO cool. So my question is this: how can I make a form that has two drop down menus (the first with 2 options and the second with 3) and a submit button which upon clicking will take the user to one of 6 html pages on my website. Drop down 1: -Fairy Goddess -Inner Warrior Drop down 2: -Young Adult -20 Something -30 and up Possible outcomes: 1. Fairy Goddess - Young Adult 2. Fairy Goddess - 20 Something 3. Fairy Goddess - 30 and up 4. Inner Warrior - Young Adult 5. Inner Warrior - 20 Something 6. Inner Warrior - 30 and up I've tried to get a start by modifying this check-box & submit disclaimer code that I successfully implemented on one page. I haven't an idea how to modify the JS to match what I want to do with the HTML. Please correct and direct me to solve this! The code I have now: <SCRIPT language=JavaScript><!--//Accept terms & conditions script (by InsightEye www.insighteye.com)//Visit JavaScript Kit (http://javascriptkit.com) for this script & more.function checkCheckBox(f){if (f.agree.checked == false ){alert('Please agree to the terms by checking the box to continue.');return false;}else{return true;}}//--> </SCRIPT> followed by: <!-- Consultation form code --> <form action="fairy-goddess.html" autocomplete="on"> Choose your Guide <input list="guides" name="guide"> <datalist id="guides"> <option value="Fairy Goddess"> <option value="Inner Warrior"> </datalist><br> Choose your age group <input list="age-groups" name="age-group"> <datalist id="age-groups"> <option value="Young Adult"> <option value="20 Something"> <option value="30 & up"> </datalist><br> <input type="button" class="btn btn-default" value="Submit" onclick="document.location.href='../disclaimer.html';"></form><!-- Consultation form code --> THANKS!!
  21. Hello DaveJ, Regarding the SPELLER script: How hard would it be to adapt the script to connect to the audio file at www.merriam-webster.com/dictionary ? ....and also to have a "PLAY AUDIO" button. eg: http://www.merriam-webster.com/dictionary/acceptable In this way I would not have to create 100 audio files AND it would save time in the future when the words are changed for new ones. - Steve
  22. What is the correct format for the non-pair tag like img or link in HTML5? In some sites I've read <img src="" />, with the slash at final, but in other sites (like w3schools) the format is <img src="" > without the slash. It works in both cases but I think there should be only one right way. Thanks!
  23. I had Menu in left page and content have to show a right side of page by frame..so now am facing one problem by frameset(i.e) one is on click of Menu link automatically have to be disappear the content have to show in full page after user may select other Link at the time Menu have to Appear By using Menu icon How to do it .??Any idea to avoid Frame-set menu.html <div class="menu" style="display: none;"> <div id="dropdownleft"> <ul style="display: none;" contentindex="0c" class="submenu"> <li><a target="content" href="jsp/Executive/Executive.html">Executive Dashboard</a></li> <!--<li><a target ="content" href="jsp/newsalereport/newsalereportmasterpage.html">New Sales Report</a> </li> --> <li><a target="content" href="jsp/saleanalysis/salenanalysismasterpage.html">Sales Analysis</a></li> <li><a target="content" href="jsp/itemwise/itemwisemasterpage.html">Itemwise Dashboard</a></li> <li><a target="content" href="jsp/Reports/cascade.html">Group-Wise Dashboard</a></li> <!--<li><a target="content" href="jsp/Executive/Topandbottom.html">Top-Bottom Report</a> </li>--> </ul> </div> <div> cafe.html <frameset rows="36,*,36" frameborder="0"> <frame src="footer/topfooter.html" name="topFrame" scrolling="no"> <frameset cols="230,*" frameborder="0" border="0" framespacing="0"> <frame src ="menu.html" marginheight="0" marginwidth="0" scrolling="no" /> <frame name="content" src ="" /> </frameset> <frame src="footer/bottomfooter.html" name="linksFrame" scrolling="no"> </frameset>
  24. Is there a way to load a page (jump to a link) n PHP, like the <a href= /> in HTML?
  25. I want my links to be block-like. Instead, they look like this:http://i44.tinypic.com/20p7mg1.jpg That's not want I want. Instead, I want something more like this (http://i40.tinypic.com/2na76ys.jpg) (except not so big) and I want the set up the same. For example, BLOCK LINK wrote on BLOCK LINK And I want that all on one line. With regular block links though, it's usually one per line. So I need help, please. Site: http://sugar-baby.org/ <--- All of the coding regarding this can be seen there. [EDIT] I have found out that the <?php wp_head(); ?> has something to do with it. if I remove the wp_head, it works, if I keep it, than it doesn't work.
×
×
  • Create New...