Search Results

Search found 2166 results on 87 pages for 'html5'.

Page 42/87 | < Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >

  • Getting error: "This webpage is not available" for my chrome app's options page

    - by Don Rhummy
    My CRX had the proper html page options.html in it, the manifest declares it properly (it shows up as a link on the chrome://extensions page) but when I click that link, Chrome gives the error: This webpage is not available The webpage at chrome-extension://invalid/ might be temporarily down or it may have moved permanently to a new web address. It says "invalid" but the app runs perfectly well (all the content scripts run, the background created a database and saved to it). Why would it show as invalid? Why doesn't it have the extensions' id? Here's the manifest: { "manifest_version": 2, "name": "MyAPP", "description": "My App", "version": "0.0.0.32", "minimum_chrome_version": "27", "offline_enabled": true, "options_page": "options.html", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "app": { "background": { "scripts": [ "scripts/background.js" ] } }, "permissions": [ "unlimitedStorage", "fullscreen", { "fileSystem": [ "write" ] }, "background", "<all_urls>", "tabs" ] } Does it need to be declared in "web_accessible_resources"? Any idea what's wrong? Update Adding to "web_accessible_resources" does not fix the issue. I added everything on that page too. update 2 It looks like it might be a Chrome bug for packaged apps. When I remove the "app" section in the manifest, it works! This is a bug since the Chrome app documentation states that apps can have options pages: https://developer.chrome.com/apps/options.html

    Read the article

  • HTML 5 offline caching

    - by kRON
    I've read the following Mozilla Developer article that explains how to implement HTML 5 offline resource caching in web apps. I've tried testing this locally: added the mime type to the list, created the manifest file, changed my doctype to the HTML 5 doctype, specified the manifest attribute and the correct path on the HTML element--but still I don't see the manifest file being consumed by Firefox at all. I've also checked the access logs on Apache and didn't see any requests for the manifest file being made. Has anyone given it a jab and had any success? I just don't know how to further troubleshoot the issue and would welcome any suggestions.

    Read the article

  • Suckerfish Menu Not Working. Nested UL not displaying block

    - by Brett
    I'm going out of my mind with this one. I'm trying to build a suckerfish css drop down menu. I have the first level working ok but I can't get the nested ul (under the Glossary tab) to display in block format and show my a background color. I've been at this for three days and I'm about to go crazy. If anyone can help I'd really appreciate it. You can see it here: www.brettlockhart.com/blast/ body { min-width:640px; margin:0px; padding:0px 40px 0px 40px; background-color:#eee; } /*Nav One styles*/ nav#navOne ul { width:100%; min-width:640px; height:25px; margin:0px auto; padding:0px; background-image:url(/blast/images/navOneBg.png); border-radius:0px 0px 8px 8px; text-align:right; float:right; } nav#navOne ul li { position:relative; display:inline; margin: 0px 0px 0px 10px auto; padding:3px 0px; border-left:1px #0b4c8f solid; line-height:23px; } nav#navOne ul li:last-child { margin-right:10px; } .arrowDown { margin: auto; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; padding: 0px 5px 0px 0px; } nav#navOne ul li a { margin: 0px auto; padding: 4px 10px 4px 15px; font-family:Tahoma, Geneva, sans-serif; font-size:.7em; color:#FFF; border-left:1px #5d9ee0 solid; text-decoration:none; line-height:23px; } /*Nav One rollover*/ nav#navOne ul li ul { display:none; background-image:none; } nav#navOne ul li:hover ul { display:block !important; } nav#navOne ul li:hover nav#navOne ul li ul li { background-color:#69C !important; left:0px; top:26px; z-index:10; } h1 { float:left; width:158px; text-indent:-9999px; background-image:url(/blast/images/logo.png); background-repeat:no-repeat; } #search { float:right; width:280px; margin:0px; padding:0px; } /*Nav Two styles*/ nav#navTwo h3 { display:inline; } nav#navTwo ul { width:100%; height:50px; margin:0 auto; padding:0px; border:1px solid red; clear:both; } nav#navTwo ul li { display:inline; border: 1px solid green; margin-top:20px; } <header> <nav id="navOne"> <ul> <li><a href="#">Sign In</a></li> <li><a href="#">Register</a></li> <li><a href="#">Print Page</a></li> <li id="glossary"><a href="#">Glossary</a> <ul> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> <li><a href="#">Item Placeholder</a></li> </ul> </li> <li><a href="#">Text Size: A A A</a></li> <li><a href="#">Select Your Location</a> <span class="arrowDown">&#x2C5;</span></li> </ul> </nav><!--/navOne--> <h1>Logo</h1> <div id="search"> <form action="?" method="get"> <fieldset> <input type="text" id="searchField"> <input type="submit" id="searchSubmit" value="Submit"> Search:<label for="radioHere">here</label> <input type="radio" id="radioHere" name="here" value="here"> <label for="radioWeb">the web</label> <input type="radio" id="radioWeb" name="the web" value="the web"> </fieldset> </form> </div><!--/search--> <nav id="navTwo"> <ul> <li><h3>Residential:</h3></li> <li>TV</li> <li>Internet</li> <li>Phone</li> <li>Pricing</li> <li class="navTwoSelected">Music</li> <li>Order</li> <li>Billing</li> <li>Support</li> <li>|</li> <li>Business</li> <li>About Us</li> </ul> </nav><!--/navTwo--> <nav id="navThree"> <ul> <li>Today</li> <li>Watch</li> <li>Surf</li> <li>Play</li> <li class="navThreeSelected">Listen</li> <li>Learn</li> <li>Local</li> </ul> <h3>Tools:</h3> <ul> <li>Webmail</li> <li>Account</li> <li>Billing</li> <li>Order Services</li> </ul> </nav><!--/navThree--> <nav id="navFour"> <h3>Your are here:</h3> <ul id="breadcrumbs"> <li>Residential ></li> <li>My Place ></li> <li>Listen ></li> <li class="currentPage">Music</li> </ul> </nav><!--/navFour--> </header>

    Read the article

  • How do I do event handling in php with html?

    - by TheAmazingKnight
    I am constructing a simple quiz using html and php. The problem I'm having is that I'm not sure how to do event handlers since it's my first time doing php. Simply, the user click on Take Quiz and it brings up the quiz, then submit the quiz using the same page and show score results. The quiz was written in HTML as shown below: HTML CODE: <section> <h1 id="theme"><span class="initial">Q</span>uiz</h1> <div id="message">Why not go ahead and take the quiz to test your knowledge based on what you've learned in Smartphone Photography. There are only 5 questions surrounding the content of this site. Good Luck! :) <br/> <button type="button" name="name" onclick="takeQuiz()">Take Quiz!</button> </div> </section> </div> <form action="grade.php" method="post" id="quiz"> <!--Question 1--> <h3>1. How many percent of modern camera phones use CMOS?</h3> <div> <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" /> <label for="question-1-answers-A">A) 20%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" /> <label for="question-1-answers-B">B) 80%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" /> <label for="question-1-answers-C">C) 50%</label> <br/> <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" /> <label for="question-1-answers-D">D) 90%</label> </div> <!--Question 2--> <h3>2. Which type of camera setting(s) is best for greater control and flexibility in terms of focusing on a subject?</h3> <div> <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" /> <label for="question-2-answers-A">A) Manual Focus</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" /> <label for="question-2-answers-B">B) Auto Focus</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" /> <label for="question-2-answers-C">C) Both A and B</label> <br/> <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" /> <label for="question-2-answers-D">D) Neither</label> </div> <!--Question 3--> <h3>3. What are the three properties included in an exposure triangle?</h3> <div> <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" /> <label for="question-3-answers-A">A) White Balance, ISO, Low Light</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" /> <label for="question-3-answers-B">B) Shutter Speed, Exposure, ISO</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" /> <label for="question-3-answers-C">C) Aperture, ISO, Exposure</label> <br/> <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" /> <label for="question-3-answers-D">D) ISO, Aperture, Shutter Speed</label> </div> <!--Question 4--> <h3>4. The higher the ISO, the more noise it produces in an image.</h3> <div> <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" /> <label for="question-4-answers-A">A) True</label> <br/> <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" /> <label for="question-4-answers-B">B) False</label> </div> <!--Question 5--> <h3>5. What is the name of the smartphone you've seen all over this site?</h3> <div> <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" /> <label for="question-5-answers-A">A) Nokia Pureview 808</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" /> <label for="question-5-answers-B">B) Nokia Lumia 1020</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" /> <label for="question-5-answers-C">C) Nokia Lumia 925</label> <br/> <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" /> <label for="question-5-answers-D">D) Nokia Lumia 920</label> </div> <input type="submit" value="Submit Quiz" /> </form> Then I have a php file named grade.php which will print the results of the quiz grade. PHP CODE: <?php // create variables linking the questions' answers from the form $answer1 = $_POST['question-1-answers']; $answer2 = $_POST['question-2-answers']; $answer3 = $_POST['question-3-answers']; $answer4 = $_POST['question-4-answers']; $answer5 = $_POST['question-5-answers']; $totalCorrect = 0; // Set up if-statements and determine the correct answers to be POSTed if($answer1 == "D") { $totalCorrect++; } if($answer2 == "A") { $totalCorrect++; } if($answer3 == "D") { $totalCorrect++; } if($answer4 == "A") { $totalCorrect++; } if($answer5 == "B") { $totalCorrect++; } //display the results echo "<div id='results'>$totalCorrect / 5 correct</div>"; ?>

    Read the article

  • Web Standards alternatives to Flex/Silverlight (I mean serious alternatives, not just JS framewoks)

    - by user252160
    Is there a set of open standards technologies that I can use to achieve the same way of development as in Flex and Sivlerlight? I am talking about componentization, separation of concerns, rich graphics, states and effects . Please point out some tutorials and other resources if possible. P.S. I KNOW that this is technically possible, so please do not respond by sending google search results or general JQuery tutorials. I've seen those already. I need to know how a Flex / Silverlight developer could design and implement an application in roughly the same way (imagine a rich HTML tag set, much like XAML/MXML, behind which stands JavaScript responsible for handling events and business logic. Think also about binding)

    Read the article

  • How do i make my text wrap in a <div> with a large border radius

    - by Greg Guida
    in the following code <html> <body> <div style="height:400px; width:400px; -moz-border-radius:100px; -webkit-border-radius:100px; border:3px solid #500; background-color:#a00; overflow:hidden;"> Why is this getting cut at the beginning??? </div> </body> </html> Why isn't the browser wrapping the text around the rounded corners. In webkit browsers(i tested both chrome and safari) the overflow hidden cuts the text outside the border. Firefox just renders text outside the border. I also tried this without overflow:hidden; but again the text just rendered outside the border.

    Read the article

  • MediaElement.js setSrc() Loading The File But Not Changing pluginType

    - by doubleJ
    I'm working on a page that uses mediaelement.js to play mp3/mp4/wmv (yes, we have a lot of wmv). I have a list of links and those links should change the player. My effort is to make the changes to the player through javascript so that the page doesn't refresh. This code is working, but it refreshes every time. See a live demo of the non-ajax version. <?php $file = null; $file = $_GET["file"]; $format = null; if (preg_match("/mp4/i", $file)) $format = "mp4"; if (preg_match("/webm/i", $file)) $format = "webm"; if (preg_match("/wmv/i", $file)) $format = "wmv"; if (preg_match("/mp3/i", $file)) $format = "mp3"; if (preg_match("/ogg/i", $file)) $format = "ogg"; $mime = null; if ($format == "mp4") $mime = "video/mp4"; if ($format == "webm") $mime = "video/webm"; if ($format == "wmv") $mime = "video/wmv"; if ($format == "mp3") $mime = "audio/mp3"; if ($format == "ogg") $mime = "audio/ogg"; $element = "video"; if ($format == "mp3" || $format == "ogg") $element = "audio"; // you have to escape (\) the escape (\) character (hehehe...) $poster = "media\\120701Video.jpg"; $height = "360"; if ($format == "mp3") $height = "30"; ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Embed</title> <link rel="stylesheet" href="include/johndyer-mediaelement-b090320/build/mediaelementplayer.min.css"> <style> audio {width:640px; height:30px;} video {width:640px; height:360px;} </style> <script src="include/johndyer-mediaelement-b090320/build/jquery.js"></script> <script src="include/johndyer-mediaelement-b090320/build/mediaelement-and-player.js"></script> </head> <body> <ul> <li><a href="embed.php">Reset</a></li> <li><a href="?file=media/120701Video-AnyVideoConverter.mp4">Alternative (mp4)</a></li> <li><a href="?file=media/120701Video-Ffmpeg-Defaults.webm">Alternative (webm)</a></li> <li><a href="?file=media/AreYouHurting-Death.wmv">Alternative (wmv)</a><li> <li><a href="?file=media/AreYouHurting-Death.mp3">Alternative (mp3)</a></li> </ul> <?php if ($file) { ?> <video src="<?php echo $file; ?>" controls poster="<?php echo $poster; ?>" width="640" height="360"></video> <div id="type"></div> <script> var video = document.getElementsByTagName("video")[0]; var player = new MediaElementPlayer(video, { success: function(player) { $('#type').html(player.pluginType); } }); <?php } ?> </script> </body> </html> This code requires <video> to be loaded, initially and with a file, so that the player mode (pluginType) is set. It will, then, only play formats that the pre-established mode supports (firefox in native mode won't play mp4). See a live demo of the ajax version. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Embed</title> <link rel="stylesheet" href="http://www.mediaelementjs.com/js/mejs-2.9.2/mediaelementplayer.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://www.mediaelementjs.com/js/mejs-2.9.2/mediaelement-and-player.js"></script> </head> <body> <ul> <li><a href="javascript:player.pause(); player.setSrc('media/120701Video-AnyVideoConverter.mp4'); player.load(); player.play();">Alternative (mp4)</a></li> <li><a href="javascript:player.pause(); player.setSrc('media/120701Video-Ffmpeg-Defaults.webm'); player.load(); player.play();">Alternative (webm)</a></li> <li><a href="javascript:player.pause(); player.setSrc('media/AreYouHurting-Death.wmv'); player.load(); player.play();">Alternative (wmv)</a></li> <li><a href="javascript:player.pause(); player.setSrc('media/AreYouHurting-Death.mp3'); player.load(); player.play();">Alternative (mp3)</a></li> </ul> <video controls src="media/WordProductionCenter.mp4"></video> <div id="type"></div> <script> var video = document.getElementsByTagName("video")[0]; var player = new MediaElementPlayer(video, { success: function(player) { $('#type').html(player.pluginType); } }); </script> </body> </html> It seems like I need something like setType(), but I see no such option. I've read a couple pages that referenced refreshing the DOM after the javascript runs, but I haven't been able to successfully do it (I know enough about javascript to hack things around and get stuff working, but not enough to create whole new things). It is worth noting that Silverlight doesn't work with Internet Explorer 8 or Safari (not sure if it's my code, mejs, or the browsers). Also, neither Silverlight nor Flash play mp3 or webm (again, not sure where the problem lies). Is there a way to dynamically load different types of files into mediaelement?

    Read the article

  • IP address detection for geo-location or MAC address much secure?

    - by SuperRomia
    Recent study many websites are using geo-location technology on their Websites. I'm planning to implement one website which can be detect the web visitor more accurate. An found that Mozilla is using some kind of detect MAC address technology in their Geo-Location web service. Is it violate some privacy issue? I believe most of Geo-location service providers only offer country to city level. But the Mac address detection enable to locate the web visitors' location more correctly than using IP address detection. If detect the MAC address is not practical, which geo-location service provider is offering more accurate data to detect my Website visitor around the world?

    Read the article

  • Web Workers - Transferable Objects for JSON

    - by kclem06
    HTML 5 Web workers are very slow when using worker.postMessage on a large JSON object. I'm trying to figure out how to transfer a JSON Object to a web worker - using the 'Transferable Objects' types in Chrome, in order to increase the speed of this. Here is what I'm referring to and appears it should speed this up quite a bit: http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast I'm having trouble finding a good example of this (and I don't believe I want to use an ArrayBuffer). Any help would be appreciated. I'm imagining something like this: worker = new Worker('workers.js'); var large_json = {}; for(var i = 0; i < 20000; ++i){ large_json[i] = i; large_json["test" + i] = "string"; }; //How to make this call to use Transfer Objects? Takes approx 2 seconds to serialize this for me currently. worker.webkitPostMessage(large_json);

    Read the article

  • Caching pictures from Picasa

    - by Renat
    Hello all, I'm creating an offline-capable IPhone app for showing pictures on picasa. It was pretty simple to use JQTouch and Google Data API (via JSONP), so I was able to show the albums and thumbnails in 3 hours, however I want that data to be cached, and for that I'm going to use the HTML 5 Application Cache (via xxx.manifest file). Now the question is what hosts shall I write there in order to cache pictures hosted on picasa. So far I've seen something like lh6.google.com or lh4.ggpht.com does anybody knows the full list of servers?

    Read the article

  • How to catch mousewheel up/down event using RaphaelJs

    - by alex.dominte
    I need to implement a horizontal scrollable timeline. I've drawn the timeline/grids/rulers etc. I just need to catch mousewheel up/down to scroll the timeline (backward - past/forward - future). First I need to catch the event: but nothing I've found seems to work. Need browser support only for chrome/firefox (latest versions). These 2 won't listeners won't work: var paper = new Raphael('raphael-paper'); // ... paper.canvas.on('mousewheel', function(event) { console.log(event); }); // ... paper.canvas.addEventListener('mousewheel', function(event) { console.log(event); });

    Read the article

  • Making a non-trivial Image and Video Gallery with a really nice interface

    - by Cawas
    Short part: I'm starting to build an Image and Video Gallery for our intranet. It's pretty much like an image gallery with video thumbnails that play on click. It's just good to keep that in mind because caching and streaming happen in very different ways there. It will serve to browse our reference database, which will also contain searching, tagging and voting. There are 3 features that I need to begin with: Quick preview of thumbnails from each Gallery Fast zoom in / out Animated scrolling Now to the long part, since I can't seem to reduce this: I hope this question belongs here. Maybe people can read this through and identify with it, specially since I expect answers to be pretty specific. The first plan was getting Apple's mobile me gallery as base, because it just so happens to have all those 3 features. If you've never seem it, you should check it out. Move the mouse over each collection and you'll get a nice preview "per pixel". Carousel got a really good scrolling, not just because of the pretty effect. I like it much more than cooliris, but it would be nice to have it in several rows, maybe without the magnifying effect... Then it could be all in the same place with the zoom. The more the features blend-in together, the better. Zooming out with the mouse, scrolling by dragging, once the zoom is really out it becomes a browsing through galleries, with the quick-show preview of each, all properly cached and fast. That'd be perfect. A very compelling interface will be important in this project. Well, my point here is just describing what I need and hope to hear from people with more experience in all that stuff of what's already done and what I'd have to do myself. And how (i.e. which framework to use) to do it. To begin with, I've found a gallery demo and its source code (I think it was from here, but the link seems broken now). I guess it was made in SproutCore, which is what mobileme was based upon. Definitely with JQuery (which already seems a little slow). But I'm still missing two features there: the carousel and the fast zoom (it's just not as slow as the zoom in this demo with cappuccino). Then I've found a supposedly better one with a pretty good and similar zoom, that I'm not sure if it's using any framework and is already in php. Right now it'd be better having just the HTML, no server-side, since I'm building interface first. So, can anyone point directions? There are way too many options! Should I look for another solution closer to what I need, or try and tweak this one? I'm not familiar with any framework at all. Sorry for bringing this question that I will have to answer myself anyway sooner or later and sorry that I couldn't make this smaller. Thanks.

    Read the article

  • How to avoid HTML Canvas auto-stretching

    - by Tom
    I have the following piece of HTML: <style type="text/css"> #c{width:200px;height:500px} </style> <canvas id="c"></canvas> <script type="text/javascript"> var i = new Image(); i.onload = function () { var ctx = document.getElementById('c').getContext('2d'); ctx.drawImage(i, 0, 0); } i.width = i.height = 20; // actual size of square.png i.src = 'square.png'; </script> The issue is that the drawn image is automatically stretched (resized) proportionally with the size of the canvas. I have tried using all available parameters (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) and that didn't help. What is causing my drawing to stretch and how can I prevent that? Thanks, Tom

    Read the article

  • accessing object variables in javascript

    - by user1452370
    So, I just started javascript and everything was working fine till i came to objects. This peace of code is supposed to create a bouncing ball in a html canvas with javascript but it doesn't work. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //clear function clear() { ctx.clearRect(0, 0, canvas.width, canvas.height); } here is my ball object //ball var ball = { x: canvas.width / 2, getX: function() { return x; }, setX: function(a) { x = a; }, y: canvas.height / 2, getY: function() { return y; }, setY: function(a) { y = a; }, mx: 2, getMx: function() { return mx; }, my: 4, getMy: function() { return my; }, r: 10, getR: function() { return r; } }; code to draw my ball function drawBall() { ctx.beginPath(); ctx.arc(ball.getX, ball.getY, ball.getR, 0, Math.PI * 2, true); ctx.fillStyle = "#83F52C"; ctx.fill(); } function circle(x, y, r) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2, true); ctx.fillStyle = "#83F52C"; ctx.fill(); } //draws ball and updates x,y cords function draw() { clear(); drawBall(); if (ball.getX() + ball.getMx() >= canvas.width || ball.getX()+ ball.getMx() <= 0) { ball.setMx(-ball.getMx()); } if (ball.getY() + ball.getMy() >= canvas.height|| ball.getY()+ ball.getMy() <= 0) { ball.setMy(-ball.getMy()); } ball.setX(ball.getX() + ball.getMx()); ball.setY(ball.getY() + ball.getMy()); } set interval function init() { return setInterval(draw, 10); } init();

    Read the article

  • I'm trying to display records from a database and then when a new one is added automatically update

    - by Pete
    I'm trying to display records from a database and then when a new one is added automatically update the displayed records from the database with the new one I am doing this using php and javascript. I want to load a page and display tags under a video and then when a user adds a new tag by entering it into text box to add it to the database and then refresh the part of the page which shows these tags and include the new one which has just been added all without the page being reloaded. Thanks in advance for any help

    Read the article

  • css absolute position won't work with margin-left:auto margin-right: auto

    - by user1118019
    Say you have the following css applied to a div tag .divtagABS { position: absolute; margin-left: auto; margin-right:auto; } the margin-left and margin-right does not take effect but if you have relative, it works fine i.e. ,divtagREL { position: relative; margin-left: auto; margin-right:auto; } why is that? i just want to center an element can someone explain why setting margins to auto in absolute position does not work?

    Read the article

  • Fake "user initiated" <audio> tag on iPad

    - by Alex Ford
    I know that Apple's docs say that an mp3 within an <audio tag on iPhone OS can't be played without user intervention (they cite bandwidth concerns, totally reasonable). However, has anyone succeeded in faking a user action to play the audio? Perhaps faking events to off screen native audio controls with JavaScript? I'm using jPlayer right now which works great on desktop Safari, but is silent on my iPad. I'm prototyping a touch interface using WebKit on the iPad, and audio is an integral part of the experience, so yes, I do have a good reason to want to override this convention. I'd appreciate any help. Thanks.

    Read the article

  • using the data-custom="" to bind to events

    - by Dean Peterson
    I'm pretty sure I'm gonna get slammed on this. I love using the data-whatever attribute to bind events to. It feels very clean to me and helps reserve my class attribute for just styling. I know this selector is among the slowest, so I don't use it when there are a lot of elements. Would love to hear compelling arguments against this. $("body").delegate("[data-action]", "click", function(){ var action = $(this).attr("data-action"); //route action to appropriate function });

    Read the article

  • HTML 5 Canvas - Dynamically include multiple images in canvas

    - by Ron
    I need to include multiple images in a canvas. I want to load them dynamically via a for-loop. I tried a lot but in the best case only the last image is displayed. I check this tread but I still get only the last image. For explanation, here's my latest code(basically the one from the other post): for (var i = 0; i <= max; i++) { thisWidth = 250; thisHeight = 0; imgSrc = "photo_"+i+".jpg"; letterImg = new Image(); letterImg.onload = function() { context.drawImage(letterImg,thisWidth*i,thisHeight); } letterImg.src = imgSrc; } Any ideas?

    Read the article

  • Float a div in top right corner without overlapping sibling header

    - by Maxime R.
    Having a div and a h1 inside a section, how do i float the div in the top right corner without overlapping the text of the header ? The HTML code is the following: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> <div><button>button</button></div> </section> I tried an absolute position relative to the parent but the text is overlapped, http://jsfiddle.net/FnpS8/2/ Using this CSS code: section { position: relative; } h1 { display: inline; } div { position: absolute; top: 0; right: 0; } I tried floating the div to the right but it doesn't remain in the top right corner, http://jsfiddle.net/P6xCw/2/ Using this CSS code: h1 { display: inline; } div { float: right; } ? I know there is a lot of similar questions but I couldn't find one solving this case.

    Read the article

  • Toggle visibility of DIV based on Dropdown

    - by user1869787
    I have never used Javascript before, only HTML and CSS. I am attempting to have my information show only when selected from my drop down. I don't know any Javascript so any help would be overly appreciated. This is my html so far: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Gone Fishin'</title> <link href="finale.css" rel="stylesheet" type="text/css"> </head> <div id="wrapper"> <div id="nav"> <ul> <li><a href="Index.html">About Us</a></li> <li><a href="Species.html">List by Species</a></li> <li><a href="County.html">List by County</a></li> <li><a href="apply.html">Reservations</a></li> </ul> </div> <body> <div id="content"> <p>ontent</p> <fieldset> <legend>Choose your Target</legend> <select name="option" id="options"> <option value=""></option> <option value="1">American Shad</option> <option value="2">Black Crappie</option> <option value="3">Bluegill</option> <option value="4">Brook Trout</option> <option value="5">Brown Trout</option> <option value="6">Carp</option> <option value="7">Chain Pickerel</option> <option value="8">Channel Catfish</option> <option value="9">Flathead Catfish</option> <option value="10">Largemouth Bass</option> <option value="11">Muskellunge</option> <option value="12">Norhtern Pike</option> <option value="13">Pumkpinseed</option> <option value="14">Rainbow Trout</option> <option value="15">Readbreast Sunfish</option> <option value="16">Rock Bass</option> <option value="17">Sauger</option> <option value="18">Saugeye</option> <option value="19">Smallmouth Bass</option> <option value="20">Steelhead</option> <option value="21">Striped Bass</option> <option value="22">Walleye</option> <option value="23">White Bass</option> <option value="24">White Crappie</option> <option value="25">White Perch</option> <option value="26">Yellow Perch</option> </select> <div id="option"> <div id="1" style="display: block">Test 1</div> <div id="2">Test 2</div> <div id="3">Test 3</div> <div id="4">Test 4</div> <div id="5">Test 5</div> </div> </fieldset> </div> </body> </div> </html> And this is my CSS: @charset "utf-8"; /* CSS Document */ /*General Styles*/ * {font-family:Verdana, Geneva, sans-serif;} #wrapper {width:85%; margin:auto; background-color:#00CC00;} /*End of General Styles*/ /* nav div styles */ #nav {background-color:#FF0000; text-align:center;} #nav ul li {display:inline-block; background-color: #67e667; border:5px dashed; width: 90px text-align:center;} #nav ul li a:link {background-color:#a60000; width: 90px;} #nav ul li a:visited {background-color: #009999;} #nav ul li a:hover {background-color: #a64b00;} /* end nav styles */ /* content div styles*/ #content {padding: 5px;} #option {display:none;} /*end content styles*/ /*start form styles*/ fieldset {background-color:#ff7400; color:white} label {display:inline-block; width: 150px; float:left; margin-right: 3px;} #form li{margin-bottom:10px;} #dtg li{margin-bottom:5px;} Thank you for any help received

    Read the article

< Previous Page | 38 39 40 41 42 43 44 45 46 47 48 49  | Next Page >