Jump to content

Search the Community

Showing results for tags 'Reference'.

  • 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

Found 10 results

  1. JulieM
    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. JulieM
    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. ocpure
    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. Dan Peltier
    I have been looking all over the w3schools.com website and other sites referring to it in an attempt to find info about requesting permission for referencing their content. The About page below does suggest that explicit permission from Refsnes Data is required to do so, and I have been trying very hard to find contact information or an online form that will allow me to make that request. I am planning to create a collection of web development tutorial videos for non-commercial use, and I am hoping to reference the w3schools.com website throughout my lessons, as it is a fantastic resource that helps people to help themselves. I am also likely to have screenshots on my website (either from the videos or of the w3schools site itself). Is anyone able to provide info on where to go for this permission? Thank you.
  5. Eido96
    My suggestion is to add HTML DOM element object outerHTML attribute for the JavaScript reference. It seems that most, if not all, the browsers support this attribute. In addition, it is important and basic attribute that new JavaScript developers should know about.
  6. Claritas

    HTML a rel

    Claritas posted a topic in HTML/XHTML

    http://www.w3schools.com/tags/att_a_rel.asp What does it mean to be selection between documents? (Next, Prev) How can we imagine a tag link? (Tag)
  7. Claritas

    HTML a media

    Claritas posted a topic in HTML/XHTML

    I was reading the reference (http://www.w3schools.com/tags/att_a_media.asp) and I've got a few question. - What is the difference between width and device-width and when are we using them? - What is the difference between aspect-ratio and device-aspect-ratio and when are we using them? - What is the difference between bits per color and number of colors and when are we using them? - What is a monochrome frame buffer, scanning method and grid or bitmap? Thanks for the anwers.
  8. mde
    I love the way W3Schools provides "Browser Support" information for HTML and CSS references! That feature has been invaluable as the development projects I'm on move to HTML 5. The move to HTML 5 is also including a better focus on Web Content Accessibility. Over the last year or so I've started to wish that you had a similar support feature with respect to Screen Readers. I know that this gets complicated very quickly due to the fact that most screen readers operate on particular OS's, and in conjunction with whatever browser (and browser version) the user prefers, but still a very basic matrix could be very useful. Some suggested Screen Reader + OS + Browser combinations: JAWS on Windows 7 with Chrome NVDA on Windows 7 with IE11 JAWS on Window 8 with IE11 JAWS on Windows 10 with Edge VoiceOver on Apple OSX with Safari VoiceOver on Apple OSX with Chrome VoiceOver on iOS with Safari TalkBack on Android 5.0 with Chrome I generated my list by choosing the most popular OS's, browsers and Screen Readers (I'll cite my sources if that becomes an issue). My list is obviously lacking any mention of Firefox which should probably be squeezed in somewhere. Do a few, do them all, add in whatever other configurations you happen to test - any additional info you could add would be great! I know this is a huge wishlist item, but it would assist many people in making better choices for producing web content that is accessible across the broadest range of technology.
  9. ronald
    hi there, i got a prob with finding refence for attributes. perhaps im not looking right, or missing things. i started looking for div attributes, finding on w3s this: - The <div> tag also supports the Global Attributes in HTML. - The <div> tag also supports the Event Attributes in HTML. i also checkt this site: http://www.w3.org/TR/html401/struct/global.html#edef-DIV at 7.5.4 there is it about the div now, i got this: (and it works just fine) <!doctype html> <html> <head> <title>my first website</title> <style type="text/css"> #myfirstdiv {border:2px solid red; width:100px; position:absolute; top:200px; left:100px;} </style> </head> <body> <div id="myfirstdiv">hello there!</div> </body> </html> i figure, this are examples of attributes: top, left, position, border, width (thats what i think at least..) but i dont see those above on the reference links. do i interpret something wrong? regards, R
  10. Tom
    Hi W3Schools - Team, One Month ago, I decided to create my own homepage. During my studies at w3schools.com I sit in front of my laptop and read, change window, type, change window, read, change window, type... After one day I wish to have all references as pdf-document for printing, but I can't found anyone. So my suggestion:All refernces as PDF-document for printing.
×
×
  • Create New...