Search the Community
Showing results for tags 'css'.
Found 8 results
-
W3shools made a custom select menu. However, they don't mention how to get the value of the select menu as a variable in javascipt. Normally, I would use var choice = document.getElementsByClassName("custom-select").value but it doesn't work with their custom version. The url of the source is https://www.w3schools.com/howto/howto_custom_select.asp and the source code is : Thank you. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*the container must be positioned relative:*/ .custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } </style> </head> <body> <h2>Custom Select</h2> <!--surround the select box with a "custom-select" DIV element. Remember to set the width:--> <div class="custom-select" style="width:200px;"> <select> <option value="0">Select car:</option> <option value="1">Audi</option> <option value="2">BMW</option> <option value="3">Citroen</option> <option value="4">Ford</option> <option value="5">Honda</option> <option value="6">Jaguar</option> <option value="7">Land Rover</option> <option value="8">Mercedes</option> <option value="9">Mini</option> <option value="10">Nissan</option> <option value="11">Toyota</option> <option value="12">Volvo</option> </select> </div> <script> var x, i, j, l, ll, selElmnt, a, b, c; /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); l = x.length; for (i = 0; i < l; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; ll = selElmnt.length; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 1; j < ll; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h, sl, yl; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; sl = s.length; h = this.parentNode.previousSibling; for (i = 0; i < sl; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); yl = y.length; for (k = 0; k < yl; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(; a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, xl, yl, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); xl = x.length; yl = y.length; for (i = 0; i < yl; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < xl; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); </script> </body> </html>
-
Hi, as a new developer I have been having problems deploying my django/python application to johnny. After several attempts, I cannot seem to be able to get access their CSS and other static files In my local server work ok, but when i upload to Johnny can't find my bootstrap css files settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'apps.hello', ] STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static_collected') STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), '/home/username/public_html/helloserver/static/',) I add an exception for the static directory in my .htaccess .htaccess RewriteEngine On RewriteBase / RewriteRule ^(static/.*)$ - [L] RewriteRule ^(media/.*)$ - [L] RewriteRule ^(admin_media/.*)$ - [L] RewriteRule ^(helloserver/dispatch\.wsgi/.*)$ - [L] RewriteRule ^(.*)$ helloserver/helloserver/dispatch.wsgi/$1 [QSA,PT,L]Can you help me? Thanks
-
Hi, as a new developer I have been having problems deploying my django/python application to johnny. After several attempts, I now have the Hello World screen working, and I have access to /admin as well. However I cannot seem to be able to get the admin functions to access their CSS and other static files. site is http://www.hannaford.id.au/admin/ and output is Django administrationWelcome, Paul. View site / Change password / Log out Site administration Authentication and Authorization Groups Add Change Users Add Change Recent actions My actionsPaulH Useradmin GroupSo clearly I am logged in, but my attempts to follow advice in the forums, and elsewhere has not worked. Here is the tail end of my settings.py file.. # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/2.1/howto/static-files/ STATIC_URL = 'hello/static/'STATIC_ROOT = os.path.join(BASE_DIR, 'hello/static/')STATICFILES_DIRS = [ os.path.join(BASE_DIR, "hello/static/"), '/home/paulfhan/public_html/hello/static/', 'c:/Users/Paul/Desktop/Projects/hello/hello/static/',]and here is my dispatch.wsg file import os, sys # edit your username belowsys.path.append("/home/paulfhan/public_html") from django.core.wsgi import get_wsgi_application os.environ['DJANGO_SETTINGS_MODULE'] = 'hello.settings' application = get_wsgi_application() and my .htaccess file RewriteEngine OnRewriteBase /RewriteRule ^(media/.*)$ - [L]RewriteRule ^(admin_media/.*)$ - [L]RewriteRule ^(hello/dispatch\.wsgi/.*)$ - [L]RewriteRule ^(.*)$ hello/dispatch.wsgi/$1 [QSA,PT,L]RewriteRule ^(hello/static/.*)$ - [L]. the directory tree is hello│ └───hello│ ├───static│ │ └───hello│ │ ├───admin│ │ │ ├───css│ │ │ │ └───vendor│ │ │ │ └───select2│ │ │ ├───fonts│ │ │ ├───img│ │ │ │ └───gis│ │ │ └───js│ │ │ ├───admin│ │ │ └───vendor│ │ │ ├───jquery│ │ │ ├───select2│ │ │ │ └───i18n│ │ │ └───xregexp│ │ ├───css│ │ └───images│ └───__pycache__ I would be grateful for help with this.
-
Hello guys, I need some help here. I don't know how to do it. I already try to mix PHP, JS, and CSS, then JS with CSS. But it doesn't work. Nah, here is I want to ask. I want to make a responsive page. But ... If the user's screen > 1365, it will make the wrapper fix width to 1000px. How can I do that? Thank you. -
Hey there! Here's a practical question to the coding gurus. Maybe there's someone who could help... The problem is I have a block of text on the left and there's a gallery of 3 images (thumbnails) I need to be placed in a row on the right. The problem is that I can't put them together in the same row. When I make changes to the code, all I get is all 3 pictures become a column instead of a row. I have a fixed width of wrapper, it is 1000px. Image sizes are the same and equal 275x140px, but I used the property -webkit-transform:scale(0.8) to reduce their size to 220x112px, so they get circa 302x 154px on hover because I used the scaling property -webkit-transform:scale(1.1) The question is should I make the wrapper liquid, stating the size of a 100%? Please take a look at my HTML and CSS code samples and help if you will? Thanks in advance! <html> <head> </head> <body> <div class="hovergallery"> <h1 class="mg">SAMPLE TEXT</h1> </br> <span class="about"> <p><b>SMAPLE TEXT</b> bla bla bla </p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </span> <ul> <li class="a"><img src="images/1.jpg" alt="Image 1"></li> <li class="a"><img src="images/2.jpg" alt="Image 2"></li> <li class="a"><img src="images/3.jpg" alt="Image 3" /></li> </ul> </div> </body> </html> And CSS .a{ float: left; margin: 4px; list-style-type:none; display: inline; } .about{ width:50%; float:left; margin: 0 20px 0 10px; } .hovergallery img{ margin: 0 10px 5px 0; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; } .hovergallery img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; } -
Welcome to my new post. If you are here then you were asking this question to google at some point to start programming your own website. I decided to share this information and help you get on the right patch to becomming a great programmer and website developer. "You are your limit" Alejandro Chataing For you to learn and apply there are some things about computers that you should know before coding. If you are like me, you would like to start learning right now. So if you feel inspired and eager to start learning right now before learning how to configure everything in a website then I will show you this: www.codecademy.com is a free place where you can start learning how to code HTML/CSS/JavaScript/Php/Python/Ruby for free. To learn with them you require 0 previous knowledge on any programming language, so if you are like I was, this is the right place to start learning. I reckon this site is idiot-proof and anyone who wants to start building a big idea should learn how to code. So if you feel like coding is imposible then try this website: www.codecademy.com They have built a good courses system to help yo implement the code they teach right on their web. Once you have finished learnning html/css/javascript/jquery/php (3 days for me), I suggest you come back to www.heliohost.com and do the following: 1) Go to http://www.heliohost.org/home/signup choose a server and signup 2) Go to http://my.dot.tk/cgi-bin/login01.taloha and join providing email & pass. You can signup there using a facebook/google/windows live/yahoo/aol/flirck account instead if you own one using just 1 click 3) Go to http://my.dot.tk/cgi-bin/domain-add.taloha and enter any name for your website 3.1) Choose "free" then "Next" 3.2) Choose "Use DNS for this domain" and notice that the option "Use Dot TK Free DNS Service" is selectedThere is another option you need to choose right below the text areas that are displayed. This option is "Use my own DNS Services" (above Use this domain for TK Mailias only) 3.3) Choose "Use my own DNS Services" and another set of text areas appear: in Host Name: put ns1.heliohost.org leave IP address blank and put ns2.heliohost.org under the first and leave the second IP address blank aswell 3.4) Register the name for a year and fill the captcha code and click "NEXT" 4)go to http://www.heliohost.org/home/ and scrolldown to the buttom. Enter you cPanel username and password 5) Create a new domain using "your-website-name.tk" and wait 24 to 48 hours until you can access "your-website-name.tk" from any computer in the world 5.1) If after waiting 48 hours you can not see anything but a standard Queued website go to http://www.helionet.org/index/forum/81-suspended-and-queued-accounts/ At this point you have yourself a free hosting, a free domain and your inicial inspiration is starting to materialize since soon enough your-website-name.tk will be public to the world 6) Since you are a newbie at programming you need to implement your new coding skills offline before putting in all together in this hosting service. So for you this is the simplest way: Go to http://www.w3schools.com/default.asp for reference when coding Go to http://www.htmlgoodies.com/ for extra reference You are wondering why I am not suggesting codecademy for referece. Because you are a newbie and codeacademy was to learn and apply with the help of their website and now you need to do it offline and those websites I put have all the info codecademy taught you and you will understand them more easily. I recommend you do not fall in love of any particular website so you can gain the knowledge from internet. It does not mean that you can not go back to codecademy, your work there has merly started. 7) Create 1 folder in your computer (does not matter where) name it what you want and create 3 files using notepad "index.html", "stylesheet.css" "scrip.js" -
Hey! So my problem is that my site looks perfect when it's on fullscreen, but when you resize the browser window, it will go out of the screen from the right side. I'd like it to be like normal sites that, when you resize the window and it's about to go out of the screen, it will ignore the "margin" and glide to left corner and "attach/stick" to it. Everything in HTML is inside <div id="contain"> tag. I hope you understood, if you didn't ask for a better explanation. Thanks, Ermu. ----------CSS----------- @charset "utf-8"; /* CSS Document */ * { margin:0; padding: 0; } html, body { height: 100%; width: 100%; padding: 0; margin: 0; } #full-screen-background-image { z-index: -999; min-height: 100%; min-width: 100%; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } h1 { font-family:Arial, Helvetica, sans-serif; font-size:42px; color:#000000; text-align:center; text-decoration:underline; } h2 { font-family:Arial, Helvetica, sans-serif; font-size:30px; color:#000000; text-align:left; text-decoration:underline; } h3 { font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#000000; text-align:left; text-decoration:none; } #contain { margin-left:25%; margin-top:4%; margin-right:25%; margin-bottom:0px; } #TBFLogo { margin-right:0px; margin-left:0px; margin-bottom:0px; margin-top:0px; width:900px; height:500px; border-width:14px; border-bottom-width:0px; border-color:#000000; border-style:solid; background:url(Images/planks.png); } #Mainbox { margin-left:164px; margin-right:0px; margin-bottom:0px; margin-top:0px; border-bottom-width:14px; border-right-width:14px; border-left-width:14px; border-top-width:14px; border-style:solid; border-color:#000000; position: relative; background:url(Images/planks.png); width:720px; padding-right:8px; padding-left:8px; padding-top:20px; padding-bottom:20px; } #Mainbox a { color:#00FF00; } #Sidebarbg { background:url(Images/planks.png); } #Sidebarlowestpad { border-bottom-width:0px; border-top-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid; border-color:#000000; } #Sidebarblock { border-bottom-width:14px; border-top-width:0px; border-right-width:0px; border-left-width:0px; border-style:solid; border-color:#000000; } #Sidebar { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; border-top-width:14px; border-bottom-width:14px; border-right-width:0px; border-left-width:14px; border-style:solid; border-color:#000000; position:absolute; background:url(Images/planks.png); width:150px; } #Sidebar ul { list-style-type: none; padding: 0; text-decoration:none; color:#000; } #Sidebar a { font-family:Arial, Helvetica, sans-serif; color:#000000; text-decoration:none; font-size: 130%; font-weight: bold; display: block; padding: 4px; padding-right:70px; } #Sidebar a:hover { background:url(Images/planksdark.png); color: #FFF; } #copyright { border-width:6px; border-style:solid; border-color:#000000; margin-bottom:0px; margin-top:8px; margin-left:170px; margin-right:0px; width:724px; padding: 6px; font-style:oblique; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:12px; background:url(Images/planks.png); } -
I've been searching for a while but haven't found what i need. I'd like to achieve something like this: ( ^ Cheap trick . I hope i was clear enough. I really appreciate all the help ) Edit: Temporary fix i found for myself: li {width:100%; border-bottom-style:solid; border-bottom-width:1px; list-style-type: none; padding-bottom:4px; border-bottom-color:black; } This is a pain since i need PHP to wrap each line in <li>
