Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

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


Age


Donation Link

Found 33 results

  1. So I'm posting this in CSS because I think I'm having a CSS issue. Basically, I have this right now: I'm trying to vertically center the blue box and everything inside it. I've tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn't responsive so that's a problem. I'm using Bootstrap from the CDN if that matters. I'm only going to include code for the first box so that it doesn't get messy. HTML: <div class="container category-forums clearfix"> <div class="container category-forums-wrap"> <div class="container category-icon clearfix"></div> <div class="container forum-details-wrapper clearfix"> <div class="container forum-details-container"> <p class="forum-name">News Center</p> <p class="forum-desc">Stay up to date with all the latest news and, more importantly, familiarize yourself with the rules.</p> <div class="sub-forum-container container clearfix"> <p class="sub-forums clearfix">Sub-Category 1</p> <p class="sub-forums clearfix">Sub-Category 2</p> <p class="sub-forums clearfix">Sub-Category 3</p> </div> </div> </div> <div class="container forum-threads clearfix"> <h4>108</h4> <p>Threads</p> </div> <div class="container forum-posts clearfix"> <h4>2000</h4> <p>Posts</p> </div> <div class="container forum-latest-posts clearfix"> <div class="container last-avatar clearfix"></div> <p>Lastest thread</p> <p>Yesterday 3:15pm</p> </div> </div> </div> CSS: .category-forums { width: 100%; height: 41%; background-color: #ecf0f1; padding: 0; border-bottom-left-radius:.25rem!important; border-bottom-right-radius:.25rem!important; } .category-icon { width: 7%; height: 100%; border-right: 1px dotted lightgray; margin: 0; float: left; line-height: 100%; } .category-forums-wrap { height: 70%; width: 100%; border: 1px dotted blue; padding: 0; display: inline-block; vertical-align: middle; } .forum-details-wrapper { width: 55%; height: 100%; border-right: 1px dotted lightgray; margin: 0; float: left; padding: 0; } .forum-details-container { width: 100%; height: 100%; border: 1px dotted gray; margin: 0; } .forum-name { margin: 0; } .sub-forum-container { width: 100%; float: left; margin: 0; } .sub-forums { width: 31%; margin: 0; float: left; } .forum-desc { margin: 0; font-size: 1.3rem; } .forum-threads { width: 9%; height: 100%; border-right: 1px dotted lightgray; float: left; text-align: center; line-height: 100%; } .forum-posts { width: 9%; height: 100%; border-right: 1px dotted lightgray; float: left; line-height: 100%; } .forum-latest-posts { width: 20%; height: 100%; float: left; } .last-avatar { width: 25%; height: 100%; border-right: 1px dotted lightgray; float: left; text-align: center; line-height: 100%; } I'm having a tough time even centering the text vertically.
  2. Hey! I want to create a website that can test your counting pace. I’ll make colored, square div that change color after 10 to 30 seconds when you hover over it, and then you’ll type down how long you think it took in a form to check if you’re right. My solution to do this is to create the PHP variable $time = rand(10,30), and in CSS get the div:hover transition-delay to be $time. Then, after the form, I need the same variable for if($_POST[timeguess] = $time) {echo “Correct!”}. I have no idea how to access the same variable in both the CSS and HTML, so I hope some of you can help me out! Thanks
  3. Hi I am trying to build a contact form and my form isnt sending. Here is my code. (its in a modal window)(I have my email address in the $to variable in the code) <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: Jarrod'; $to = 'email'; $subject = "Landing page"; $body = "From: $name\n Email: $email\n Message:\n $message"; ?> <?php if ($_POST['submit']){ if(mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; }else{ echo '<p>Something went wrong, go back!</p>'; } } ?> <div class="modal fade" id="contact" role="dialog"> <div class=" modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h2>Contact us</h2> </div> <div class="modal-body"> <form method="post" action="index1.php"> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="email" placeholder="Email"> <label for="Message">Message</label> <textarea class="form-control" id="message" placeholder="Message"></textarea> <input type="submit" value="Send">Send</button> </form> <div class="modal-footer"> <a class="btn btn-default" data-dismiss = "modal">Close</a> </div> </div> </div> </div>
  4. Hi, I'm currently stuck as two how I can do this, I have a desktop and mobile design where on Desktop the design acts like tabs but on mobile it acts as an Accordion. But i'm not too sure how the best way to go about this is. Please see attached the designs. Any examples or advice on how to do this would be greatly appreciated.
  5. Hello, I have this small html and php files and the problem is I can't send any emails... When I press submit it just opens php file on the browser. Can anyone help me? Here is the code <html> <link href="style.css" rel="stylesheet" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Contact Form</title> </head> <body> <header class="body"> </header> <section class="body"> <form method="post" action="mail.php"> <label>Name</label> <input name="name" placeholder="Type Here"> <label>Email</label> <input name="email" type="email" placeholder="Type Here"> <label>Message</label> <textarea name="message" placeholder="Type Here"></textarea> <label>*What is 2+2? (Anti-spam)</label> <input name="human" placeholder="Type Here"> <input id="submit" name="submit" type="submit" value="Submit"> </form> </section> <footer class="body"> </footer> </body> </html> <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = 'From: TangledDemo'; $to = 'myemail@gmail.com'; $subject = 'Hello'; $human = $_POST['human']; $body = "From: $name\n E-Mail: $email\n Message:\n $message"; if ($_POST['submit']) { if ($name != '' && $email != '') { if ($human == '4') { if (mail ($to, $subject, $body, $from)) { echo '<p>Your message has been sent!</p>'; } else { echo '<p>Something went wrong, go back and try again!</p>'; } } else if ($_POST['submit'] && $human != '4') { echo '<p>You answered the anti-spam question incorrectly!</p>'; } } else { echo '<p>You need to fill in all required fields!!</p>'; } } ?>
  6. Hi I am currently using bootstrap to design a landing page. I want to add a contact us form and I need to use a text area for long messages. When I use it with bootstrap it just appears as a single line and not a large field. How can I style just 1 field instead of all of them? This is my HTML code. <form> <div class="form-horizontal"> <label for="Name">Your Name</label> <input type="text" class="form-control" id="Name" placeholder="Name"> <label for="Email">Your Email</label> <input type="Email" class="form-control" id="Email" placeholder="Email"> <label for="Message">Message</label> <input type="textarea" class="form-control" id="Message" placeholder="Message"> </form>
  7. Hello, I am looking for a css dev to complete a navigation menu (or replace it). I will give you the current code (static html and css) you will have to create the css on your own server. Please do not ask for me to create an environment for you to work in. The dev needs good English, French or Dutch language skills to communicate. After the navigation menu is finished, more work for general layout is possible. you can look at the current version here http://www.test.anatak.com/en/twintipFusion3lw.php payment will be made by paypal after delivery 5000 yen for the navigation with general layout of website CSS navigation in CSS and HTML (No javascript) Responsive style for mobile devices general layout for site (div for navigation, content and footer) thank you anatak Please contact me on info [@] anatak.com
  8. Hi, I hope I am in the right place for some help. If not, I apologize I have just installed e-fiction on my website and I am having a little issue with some of the codes and where I need to go to modify things. This is a screenshot of the page and what I am trying to modify. What I want to do is make the banner CENTERED. This I thought was easy but whatever I do, it doesn't seem to work. I must be looking in the wrong place. Secondly, I want to move the menu bar - HOME - MEMBERS - SEARCH etc underneath the banner and that too to be centered. I am going to upload the files to Sendspace ( http://www.sendspace.com/file/mi0i6e), as the zip is too big to upload here and I am unsure which files need to be modified (that is where I am stuck) Thank you SO much, and I hope someone can help me. I am trying to learn all of this and it's all so confusing
  9. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  10. A website user was telling me that text wasn't appearing on bold when the CSS called for font-weight:bold. She's using a Mac desktop, with Safari (and possibly Chrome; I don't have all info yet). The font is Raleway: <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"> From what I was able to find -- no one on Google seemed to have this exact issue -- sometimes Safari won't show bold unless you specifically reference a font for it? Is that right? So the solution seems to be changing the stylesheet reference to: <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" type="text/css"> This just seems incredibly odd to me. I've never heard of a user having this issue before. Is this known? Is that the actual fix? Am I to assume all browsers on Chromebook (my preferred platform) and Linux and Windows just create an ad-hoc "faux bold" to display, if bold isn't specified? A lot of questions, but this is just a weird issue, especially since I haven't heard of it until June 2016.
  11. In general if I know how to do something I want to do I can code it in a language I'm less than fluent in, if I am fluent in a language I can figure out how to code something I want to do but don't know very well how to do it, but this time I have almost no clue how to do what I want to do and very limited fluency in JS. I want a script that will slowly fade from one color (red, green, blue, white, black) to a neutral color (grey) and then fade into one of the randomly selected other 4 colors. Then repeat. Forever. So like Rd>gy>wt>bu>gy>bk etc. I have no clue what to do, if you can help I will be grateful for all time. Oh, and I need to make sure the text color is always contrasting so it can be read, so I need to adjust that too?
  12. I have a small issue here which I can't quite figure out. I have three containers on one page all below each other. One for buttons, a JS image slideshow and a description box. The image slider seems to take up unnecessary space when the browser is resized activating media queries: http://gyazo.com/33376dcadc99cba69d5668e240fae788 CSS desktop view (without media queries): body { background: #141414 url('../images/background1.png'); background-repeat: repeat-y; background-attachment:fixed; background-position:center; } #container{ height:450px; width:840px; margin:120px auto 2% auto; position:relative; } #container2{ height:60px; width:840px; margin:0 auto 50px auto; position:relative; -moz-box-shadow:0 0 5px 5px black; -webkit-box-shadow:0 0 5px 5px black; box-shadow:0 0 5px 5px black; } #container2 p{ color:white; font-size:15px; padding-left:5px; } #container2 h2{ color:white; font-size: 18px; text-decoration:none; padding-left:5px; padding-top:2px; } #img{ height:450px; width:840px; position:absolute; -moz-box-shadow: 0 0 5px 5px black; -webkit-box-shadow: 0 0 5px 5px black; box-shadow: 0 0 5px 5px black; } #l_holder{ height:450px; width:100px; position:absolute; left:0px; top:0px; cursor:pointer; } #r_holder{ height:450px; width:100px; position:absolute; right:0px; top:0px; cursor:pointer; } .left{ height:50px; width:50px; position:absolute; top:45%; left:0px; } .right{ height:50px; width:50px; position:absolute; top:45%; right:0px; } .clear{ clear:bottom; } CSS with media queries, this is where the container is causing a problem: @media all and (min-width: 3.5in) and (max-width: 10in) { body { background: #141414; } #container{ height:30%; width:100%; margin:5% auto; padding:0 0 0px 0; } #container2{ width:100%; margin: 0; padding: 0; } #container2 p{ padding-left:3px; } #container2 h2{ padding:5px 0 0 3px; } #container2 .body_black_box{ } #img{ height:80%; width:100%; } #l_holder{ height:80%; } #r_holder{ height:80%; } .left{ } .right{ } .clear{ } } Any help is greatly appreciated.
  13. I have this jquery code below. It basically shows a new div when mouse hover over another div. It works. But I noticed that on page load, it sometimes shows 1 or 2 products already hovered and showing the ".show-details" content. This doesn't happen on every page and sometimes it's only 1 product and sometimes it's 2 products. And they vary in the positions on a page. Do you know why it's doing that and how to fix it? By the way, I have ".show-details" set to display: none by default in the CSS file. <script> $(document).ready(function() { $(".product-small").hover(function() { $(this).find('.show-details').fadeIn("fast").css({ display: 'block'}); }, function(){ $(this).find('.show-details').fadeOut("fast").css({ display: 'block'}); }); }); </script>
  14. I have 3 price tables on my page. These tables under 720px width resolution should get one under the other one (i use bootstrap). The problem is that in any browsers they align well but on desktop safari, ios safari, ios firefox, ios chorome the tables not aligning well at all. You can take a look HERE on safari under 720px resolution to see how it looks. I don't manage to see what is causing the problem.
  15. I am a plug-in author and need to have a simple CSS editor in my plug-in options page. what is the best way to do this? At now my plug-in just show a simple textarea, but I need to make it highlighted. Thanks.
  16. Hello there, my name is Ryan. I am a Web Developer from England that specialises in creating mobile-responsive websites. Whether you need a website that takes monthly payments, one-off purchases or runs ads I will take your idea and craft an elegant solution. Skills - PHP HTML5 CSS Javascript I have built user-interfaces and backend database systems, in my 10 years of web development there is little I haven't touched upon. If you are interested in my services you can contact me at: Email ryansocratous@gmail.com Skype ryanify Thank you.
  17. Wasnt sure whether to put this in Javascript or CSS, sorry... I'm using Skrollr at this dev URL (http://workwave.joomlatest01.mms-dev.com/) to make all the desk items "slide away" NOTE: things are messy currently but you get the gist of what happens (i.e. the clutter moves away and the software on the monitor replaces it) I'm using this "helper" function, found here (https://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/)... var setSkrollr = function($el, data) { for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value) var d = data[i], // the current data entry px = d[0]; // the scroll position (in pixels) css = d[1]; // the css property + value to set $el.attr('data-' + px, css); } } So the skrollr code for these moving desk items looks like this currently... jQuery(function($) { setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]); setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 50px ']]); setSkrollr($('#filecabinet'), [[0, 'top: -60px; left: 60%; display: block;'], [300, 'top: 280px; left: 200%; display: none']]); setSkrollr($('#calculator'), [[0, 'top:520px; left:0%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#stapler'), [[0, 'top:440px; left:12%'], [300, 'top:700px; left:-200%']]); setSkrollr($('#pens'), [[0, 'top:280px; left:38%;'], [300, 'top:580px; left:-200%; ']]); setSkrollr($('#postits'), [[0, 'top:470px; left:70%; display: block;'], [200, 'top:700px; left:200%; display: none;']]); setSkrollr($('#cup'), [[700, 'top:640px'], [1800, 'top:-500px'] ]); setSkrollr($('#map'), [[0, 'top:530px; left:73%; display: block'], [200, 'top:700px; left:200%; display: none; ']]); setSkrollr($('#calendar'), [[0, 'top:500px; left:22%;display: block'], [300, 'top:740px; left:-200%; ']]); setSkrollr($('#monitor'), [[0, 'display:none'], [100, 'display:block; top: 100%'], [300, 'top:11%; position: fixed'], [700, 'top:11%'], [1600, 'top:-100%'] ]); setSkrollr($('#headline'), [[700, 'top:90px'], [1800, 'top:-400px'] ]); setSkrollr($('#desk'), [[700, 'top:560px'], [1800, 'top:-500px'] ]); setSkrollr($('.toplink'), [[0, 'display:block'], [10, 'display:none']]); skrollr.init({ smoothScrolling: false }); I can change the size of the images based on screen resolution using CSS Media Queries and "scale" to reduce the size of the images as the screen width decreases. But right now things are POSITIONED using that skrollr helper function above and I can't change the positions based on screen resolutions. In other words, whatever position I specify in the helper function is the position always. So I can say start the map 85% from the left and it will always be 85% from the left regardless of screen size. So visually it starts in different spots, i.e. if things are positioned OK on a 1920 monitor, when you go down to a 1024 monitor, things are not ideally positioned. It would be a lot of work, but if I could adjust starting/ending positions in media queries, I could make things look perfect at pretty much every resolution. Anyone know if this is possible? I'm new to Skrollr so may just be missing something. Or if anyone has other ideas on how to do this animation easier/more efficiently, please let me know. Thanks!
  18. <?php $con=mysqli_connect("localhost","my_user","","shazz"); $query = mysqli_query($con,"SELECT * from posts2 order by rand() LIMIT 0,4"); $post_title ="shazz"; while ($row=mysqli_fetch_array($query)) { $post_id=$row['post_id']; $post_title=$row['post_title']; $post_date=$row['post_date']; $post_author=$row['post_author']; $post_image=$row['post_image']; $post_keywords=$row['post_keywords']; $post_content=substr($row['post_content'],0,200); } ?> the following are the errors im facing: Warning: mysqli_connect(): (HY000/1044): Access denied for user ''@'localhost' to database 'shazz' inC:\xampp\htdocs\shazz\include\main_content.php on line 3 Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given inC:\xampp\htdocs\shazz\include\main_content.php on line 4 Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given inC:\xampp\htdocs\shazz\include\main_content.php on line 6
  19. Over the past year I started using composer and have realized that using a dependency manager keeps development and code maintenance so much easier. yay composer! I can see an equally big need to do this for front side technologies (ie: js & css) What exists for us PHP developers to help maintain that huge mess of front end stuff we need to include. Is there something to manage and minify JS/CSS that works well with the PHP environment? Thanks
  20. Is it possible to have a horizontal masonry effect? I know usually masonry is done in columns with posts shown in order vertically. However I want it to be done horizontally. I also want it to be CSS only - no JavaScript whatsoever. Is this possible? Have tried loads of things like displaying as flex, CSS columns, floating, inline-blocks and whatever.
  21. I want to have a list that has pictures on either side of each li. As the li gets bigger (more content), the images should stay in the middle of the li. I've tried numerous divs, before and after classes and gone a bit mad. Any ideas please?
  22. Hi everyone, I usually write PHP, but this time, I need a help in CSS. I am trying to create a vertical text, Not transfer rotate degree. I want to write like this: C L A S S Thanks, Gary
  23. I can't figure out how to make this script (twitch(dot)tv) to show only online/live channels not all... Here is Javascript (function () { 'use strict'; angular .module('twitch', []) .controller('TwitchCtrl', TwitchCtrl); function TwitchCtrl($http, $scope) { $scope.streams=[]; var apiEndPoint = 'https://api.twitch.tv/kraken/streams/'; var streamers = ['Chizijs','tornis', 'elveeftw', 'piecits', 'lobosjr', 'fattypillow']; var apiSuccess = function(response, streamer){ console.log(response); var stream = response.data; stream.Name = streamer; var offline = stream.stream === null if(offline){ stream.stream = {game: 'offlines', channel:{ 'logo': '' }}; $scope.streams.push(stream); } else{ $scope.streams.unshift(stream); } console.log(stream); }; var apiError = function(response, streamer){ console.log(response); if(response.status === 422){ var stream = response.data; stream.Name = streamer; stream.stream = {game: 'Account Closed', channel:{ 'logo': ''}}; console.log(stream); $scope.streams.push(stream); } }; var setupSuccess = function(streamer){ return function(response){ return apiSuccess(response, streamer); }; }; var setupError = function(streamer){ return function(response){ return apiError(response, streamer); }; }; for(var i = 0; i < streamers.length; i++){ var onSuccess = setupSuccess(streamers[i]); var onError = setupError(streamers[i]); $http({url: apiEndPoint + streamers[i], method:'GET'}) .then(onSuccess, onError); } } })();
  24. We've got a responsive menu that when you click on an li the ul inside it is then displayed as a block (displayed as none beforehand). However you cannot then close the ul without refreshing the page or closing the menu itself. What we want is for when you click the li again, the ul inside it then displays as none. Is this possible using only CSS? (No jQuery please!!!) Any help is greatly appreciated, thanks!
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.