css

[Solved] HTML CSS image responsive website

by

You could make use of css calc() function to set top positioning of element as below. .imagess { position: relative; width: 100%; height:800px; overflow:hidden; background:#111; } .imagess > img{ position:absolute; width:200px; height:300px; right:0; top:calc(100% – 90%); } <div class=”imagess”> <img src=”https://source.unsplash.com/random”> </div> solved HTML CSS image responsive website

[Solved] Need css for half filled circle with complete border

by

This is how you can achieve it in CSS. .wrapper{ width: 100px; height: 100px; border-radius: 50%; border: 3px solid black; overflow: hidden; } .one{ display: inline-block; background-color: green; height: 100px; width:50px; border-right: 2px solid black; } .two{ display: inline-block; background-color: white; height: 100px; width:50px; } <div class=”wrapper”> <div class=”one”></div> <div class=”two”></div> </div> solved Need css … Read more

[Solved] Click the button and it sends that info into another box on the page [closed]

by

Using html, css and jQuery you can get your desired output. Please check below code. function getHtml() { var test = $(“#input”).text(); $(“#output”).show(); $(“#remove”).show(); $(“#output”).text(test); } function remove() { $(“#output”).hide(); $(“#remove”).hide(); } #output { display: none; } #remove { display: none; } <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <div id=”input”> Input: welcome </div> <button onClick=”getHtml()”>Click</button> <div id=”output”> </div> <button … Read more

[Solved] HTML aligning ’s correctly

by

You will need parent for both percent text.. Something like this. <div class=”percent-container”> <p id=”currentlbl” class=”percent”>00:00:00</p> <p id=”durationlbl” color=”“white”” class=”percentt”>00:00:00</p> </div> And the CSS for new percent-container class should be like this.. .percent-container { position: relative; height: 30px; } Also changed the CSS of the percent and percentt class. I have made the position:absolute and … Read more

[Solved] Need sub-menu for vertical sidebar with CSS or Jquery

by

If you want to make it appear after a click, yes you must use Javascript. First, you have to make a class “submenu” inside of your class “item”. Then hide in CSS the class “submenu” With JQuery like you said, you have to make a function like this : $(‘.item’).click(function() { $(this).find(‘.submenu’).show(); }); It will … Read more

[Solved] Automatically adding links to files in a folder in JavaScript

by

<html> <head> <script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/264659524/Files/jquery-1.9.0.min.js”></script> <script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/264659524/Files/myjs.js”></script> <style> .ytid{float:left;margin-right:5px;border:1px solid black} .clear{clear:both;} </style> </head> <body> <div class=”listids”> <div class=”ytid” data-str=”p9zdCra9gCE”>video 1</div> <div class=”ytid” data-str=”QrMOu4GU3uU”>video 2</div> </div> <div class=”clear”></div> <br> <div class=”vidarea”> <div class=”load_vid”></div> <iframe class=”vid_src” data-src=”” scrolling=”no” frameborder=”0″ marginheight=”0″ marginwidth=”0″ style=”width:640px; height:460px;display:none;” allowfullscreen=””></iframe> </div> <br><br><br><br><br><br><br><br><br><br> <textarea class=”embed” data-content=”&lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; … Read more

[Solved] navbar – making only one tab active with css [closed]

by

Yes. Check out the pure CSS way: ul {margin: 0; padding: 0; list-style: none; display: block;} ul li {display: inline-block; margin: 0; padding: 0; list-style: none;} ul li input {display: none;} ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;} ul li a:hover, ul li input:checked … Read more

[Solved] How do i seperate my menu section form my main area on CSS [closed]

by

Do you mean something like this: http://jsfiddle.net/byxwr1he/2/ HTML: <div id=”header”> header </div> <div id=”mainContainer”> <div id=”sidePanel”> side panel </div> <div id=”main”> main content <div id=”footer”> footer </div> </div> </div> CSS: div { border: 2px solid blue; } #mainContainer { height: 500px; position: relative; } #sidePanel { float: left; top: 0; bottom: 0; width: 150px; position: … Read more

[Solved] Responsive Image Slider With Caption and 100% width and Custom height [closed]

by

Here is an alternative slider – much easier to use. http://bxslider.com/ And here is a demo in jsfiddle that you can reference, it meets the same specs as your original with less overhead and much. I even set up your description divs. <ul class=”bxslider”> <li> <img src=”http://image-ling-goes-here.jpg” /> <div class=”slide-desc”> <h2>Slider Title 1</h2> <p>description text… … Read more

[Solved] How do I display a different image everytime the image is clicked? [closed]

by

If you are using html js and css: jsfiddle http://jsfiddle.net/harshdand/dec2mpbv/ html: <img src=”http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1124750273-15.jpg” id=”images”/> js make an array of images u want var currentImageIndex = 0; var images=[ ‘http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1124750273-15.jpg’, ‘http://images7.alphacoders.com/408/thumbbig-408758.jpg’, ‘http://images6.alphacoders.com/410/thumbbig-410020.jpg’, ‘http://picture-gallery.dnspk.com/albums/userpics/10001/normal_1127034390-11.jpg’ ]; document.getElementById(‘images’).setAttribute(‘src’,images[0]); document.getElementById(‘images’).onclick = function(){ if(currentImageIndex<images.length-1) currentImageIndex++; else currentImageIndex = 0; document.getElementById(‘images’).setAttribute(‘src’,images[currentImageIndex]); } solved How do I display a different image everytime the … Read more