Jump to content

Search the Community

Showing results for tags 'id'.

  • 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 13 results

  1. Dear everyone, As a beginner, I continue to have trouble understanding the practical utility of the id-selector. Some arguments I see given in favour of the id-selector are as follows: > Specificity: I understand id-selectors have the highest specificity, which can be useful if one wants to ensure a certain class is not overridden. But I have difficulty imagining a scenario in which this would be a true problem. If a coder overrides his own classes, does this not simply mean his code is not in order? When he overrides his own styling, at least he is alerted he needs to correct his code. In this sense, I cannot see a true utility to the id-selector; it seems but to enable sloppy code, which might produce more complicated problems later on as one's project grows more complex. No offence intended, of course. > Targeting Unique Elements: To my understanding, a given id-selector class can be applied only once to a single instance of an html-element. I don't see a reason why one would not just create a unique class for a respective single element with its own unique and respective styling needs. I can, however, imagine the unique syntax of the id-selector makes it more perceivable and standout in a stylesheet, adding to readability. However, one can easily suggest alternatives such as applying comments, or using comments to categorise a group of classes. I personally cannot see the id-selector's role here to be thus meritorious to warrant its existence. > JavaScript Interaction: JavaScript can work and manipulate ids, but it can manipulate and interact with classes just as easily. Is there truly a difference in what JavaScript can do with ids (in terms of CSS/styling) in comparison to what it can do with classes? I would be most grateful if anyone can show me the practical utility of the id-selector. I continue to feel it has no true practical discerning utility compared to the class-selector, which likely indicates I have simply not understood its role properly. I have had this question for a long time, asked here and there, but could never be truly answered. Sincerely, silverRainfall
  2. I believe it's a pretty common observation that the w3-top class of w3.css works by hiding the page below. It seems to me that the default solution is to add some <br> , or setting a margin on the top of the page. That's good enough for layout, but that doesn't help if you use bookmarks with id: when you follow a link from an element with <a href="#example">, this will show the <div id="example"> on the very top of the page, where it will be covered by the w3-top class. I know it's a bit silly and not a huge problem but I'd like the user to get to read the bookmark without scrolling the w3-top class out of the way. Does anybody have any idea on how to solve it? Is there a way to set the bookmark a little higher (to a set height for every instance) on the page? Am using this to write an article with a list of references at the bottom.
  3. I'm quite new to coding, and have big trouble understanding the logic in even the supposedly easiest languages to learn. However, what is the functional differences between .class and #id? Is there situations where only either of them can be used? I can't see any difference by reading the W3 pages about them (respectively https://www.w3schools.com/cssref/sel_class.asp and https://www.w3schools.com/cssref/sel_id.asp).
  4. Please consider the following code and answer the question. Please do not omit your reasons for answering as you did. CODE SYNOPSIS: This handy piece of code places a constraint on the number of words that can be placed in a selected <textarea> element. In addition, it displays the current status of the selected element as one enters text. This code, less the iterative aspect, has been tested for one <textarea> element, but I wish now to expand it to include many <textarea> elements. In order to do this I created a mixed associative array (see below) whose data I use to select each <textarea> element and apply a different constraint. Although I have identified each <textarea> element by its unique id='' attribute I have used the class='' attribute to display the current status of the selected <textarea> element. My motivation for doing this latter is, of course, one of efficiency. My belief is that specific overrides general, and that the values generated by the id='' attribute will override those designated by the class='' attribute -- a designation that is common to all <textarea> elements. QUESTION: Is this sound Javascript programming logic? Or, must I change the class='' attributes to the same id='' attribute for each <textarea> element? <?php foreach($wordmax as $textarea => $arr) { $area_id = $arr['id']; $max = $arr['length']; $($area_id).on('keydown', function(e) { var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0; if (words <= $max) { $('.display_count').text(words); $('.words_remaining').text($max-words); }else{ if (e.which !== 8) e.preventDefault(); } }); } ?> <textarea id='letter_body' name='letter_body'>...</textarea><br /> Word Count: <span class='display_count'>0</span> Words Remaining: <span class='words_remaining'>0</span> <textarea id='letter_abstract' name='letter_abstract'>...</textarea><br /> Word Count: <span class='display_count'>0</span> Words Remaining: <span class='words_remaining'>0</span> $wordmax = array( 'letter_abstract' => array ( 'id' => '#letter_abstract', 'length' => '150' ), 'letter_body' => array ( 'id' => '#letter_body', 'length' => '800' ), . . . 'student_bio' => array ( 'id' => '#student_bio', 'length' => '400' ), );
  5. Interesting problem with the W3 schools checker 'Nu Html Checker'. I am using a CSS file that I have written which includes a reference 'area1'. I am calling it on many occasions e.g. <a href="mountains.php" id = "area1">Mountains</a> as I only want 'Mountains' to be affected by this particular CSS. When I run Nu Htnl Checker, I get this: Error: Duplicate ID area1. From line 330, column 148; to line 330, column 185 ></td><td><a href="mountains.php" id = "area1">Mounta Surely I can use a piece of CSS more than once in an html document??
  6. Hello, this is my first time posting, and I wanted to know how to start of on an id using the W3Schools Tab function. Here is the code! <!DOCTYPE html> <html lang="en"> <head> <title>(null)'s Website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="V1.css/Home.V1.css" rel="stylesheet"> <link href="V1.css/Home.V1.Slideshow.css" rel="stylesheet"> <script type="text/javascript" src="V1.js/Tabs.js"></script> <script type="text/javascript" src="V1.js/Slideshow.js"></script> <script src="https://www.w3schools.com/lib/w3data.js"></script> </head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Home')">Home</button> <button class="tablinks" onclick="openCity(event, 'News')">News</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="Home" class="tabcontent"> <h3>Home</h3> <h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="V1.png/NEW!.png" style="width:100%"> <div class="text">Loving the look of our new website?</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://img.clipartfest.com/182119c47939e54a12e23325c2153d0d_garfield-clip-art-garfield-clipart_500-500.jpeg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://s-media-cache-ak0.pinimg.com/736x/35/a5/26/35a526aa3f44fb009da502db1127a82c.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <div id="News" class="tabcontent"> <h3>News</h3> <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Updates</button> <div id="Demo1" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 1</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Announcements</button> <div id="Demo2" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 2</h4> <p>Some text..</p> <hr> </div> <button onclick="myFunction('Demo3')" class="w3-btn w3-block w3-black w3-left-align">Blog</button> <div id="Demo3" class="w3-container w3-hide w3-animate-zoom"> <h4>Section 3</h4> <p>Some text..</p> <hr> </div> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 10000); // Change image every 2 seconds } </script> <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> jQuery("#menu li a").click(function(){ var page_url = jQuery(this).attr("href") jQuery(".wide_main").html("<p>loading...</p>"); jQuery(".wide_main").load( page_url + ' #home'); }); </script> </body> </html> What I want to start off on when the html file is loaded, is the 'home' id.
  7. hello there!!i m building an app for the elections..in this app i ve build a rest service that takes data(votes,etc) from a .js file of another website,and presents them to some fields.the problem is that.on that js file,the creators provide only "party_id" and not "party_name" which is contained in another .js file.i copied the id's and the names to my database.and now i want that:when the first js file gives the "Party_id",to search the database and provide me the "party_name"..what i want to do is to compare the values given from the rest service and the database collection and to return the correct name. i tried this code: var objectId = value; //Debug information that you can see in browser console.console.log("objectId = " + objectId);var whereObject = {"kwdikos": objectId};return JSON.stringify(whereObject); as shown here,it returns all the database array!! http://imageshack.com/a/img673/9877/EkpHcb.png but as it seems,it returns it without comparing..i mean,i want it when the id sent is 2,to return ND,and when id_sent is 1,to return PASOK.it just displays all the database array without criteria match!i tried to do it by using IF statement,but it didnt let me do it!! the correct results should be these:http://imagizer.imageshack.us/a/img537/7291/d2mTx9.png thanks for your time guys!!!
  8. Hello, MyProject I am having a hard time making the form inputs align with the localstorage table. The forms will have to fit in between the ID and ACTIONS columns and align with where the data is being inputted. I also am having a hard time setting the widths for the table columns. Adjusting the padding is not a problem, but setting a set width is a problem. Any help would be greatly appreciated. Also, is there any way to change the local storage ID something like GW-"DATE"-"TIME" rather than numerically going up 1-2-3-4-5-etc.? Thank you, I SIDEARM I
  9. I have created a calendar for my golf league and wish to color code the days that we play with a specific color and other events different colors. We play on a thursday so I would like to color code all thurdays "green" My question is, what would be the best and most professional way to do this? Would creating an external css file and giving each Thursday the same ID or class name? Would a Class designation be better? Would the following coding example be appropriate? Any help would be greatly appreciated Thank you CSS file: .thursday { bgcolor: green; } HTML file: <td class = "thursday">.......
  10. Hello once again, i will do this one short, since i feel stupid asking about it, but its a must since i cannot remember, and might be a rookie question -.-'... anyhow, here is my css: .chat_div_bottom_global_friend_list_button a:hover { text-decoration:none; color:#CDCDCD; background-color:#900; } .chat_div_bottom_global_friend_list_button a:link,a:visited,a:active { text-decoration:none; color:#CDCDCD; } here is my html: <span class='chat_div_bottom_global_chat_rooms_button'> Chat Room (Public)</span> <span class='chat_div_bottom_global_friend_list_button'> <a href='#'>Friend list (0)</a></span> now the question, i have a background to the link, but i would like that background, to cover the whole span if possible, any ideas? X)... [PICTURE ATTACHED]
  11. This question is specific to named CSS selectors. There is probably an obvious answer to this question, so I apologize ahead of time. If I wanted to apply a property to a bunch elements I would use a class; could I also use an id to give individual properties to any of those elements? Basically, can a single element have a class and an id? Can there be multiple classes? If so, is this proper html to do it this way, for all the main doctypes?I'm just confused, because I don't think I've ever seen any examples whilst learning, in which an element has a class and an id. Are there any other methods for selecting name elements with CSS (that are compatible with all main browsers), other than "class", "id", and "title"? Any help would be appreciated.
  12. Hellooo.. :DCould you please tell me the difference between id and class?I think that it is the same..Take a look ! Using ID : <!DOCTYPE html><html><head><style>#center{text-align:center;}</style></head> <body><h1 id="center">Center-aligned heading</h1><p id="center">Center-aligned paragraph.</p> </body></html> Using Class : <!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head> <body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p> </body></html> I see there's no difference, but in w3schools.com,It says that The id SelectorThe id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#". The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.This allows you to set a particular style for many HTML elements with the same class.The class selector uses the HTML class attribute, and is defined with a "." But, i think the id selector can also be for a group of elements.. Please explain this !
  13. why should i use a css id and not style it (inline).w3schools css book says that we shouldn't unse the same id multiple times on multiple elements why ?why shouldn't we use inline style id one id can only be used for one tag ?
×
×
  • Create New...