danixd - Developer IT

HTML5 / CSS3 display:inline

- by danixd

I am looking to make a horizontal layout website but having issues with the display: inline rule acting strangely. It seems to be tailored towards inline navigational s, which is nice, but it is causing me massive problems. Here is my code: <div id="container"> About Us Project 1 Project 2 Project 3 Project 4 Project 5 Blog 1 Blog 2 Blog 3 Blog 4 Blog 5 Contact Tweets Comments Links </div>  #container{ height: 600px; display: inline; } section{ display: inline; } article{ height: 600px; width: 300px; display: inline; } This is what it looks like: http://danixd.com/archive/html5.html The display:inline completely overwrites the height and width set for the articles in the CSS. Any ideas?

Read the article

Bringing ideas to life

- by danixd

I understand that this forum is filled with computer science genius's but there must come a point where your expertise in coding can not keep up with your creativity. I am a front end programmer and designer of sorts. I have so many ideas, with no ways of implementing them. I know of platforms that can help, I am really into the arduino project for physical ideas and I know Flash is an amazing platform for software, but when it comes to complex ideas, even such as a 3D game, things can be too much to handle individually. When you have an idea, what is your typical methodology of bring them to life? Write down the idea, save if for later (never gets made right...) Try building it yourself, on the platforms you work with and are good at Consult people on what platform it is best suited to and collaborate with an expert in that field to do the dirty work Consult people on what platform it is best suited to and try to learn it and make it yourself (at least the alpha stages) Are there any communities that support this idea of bringing things to life? Can you pitch ideas to x company as a business model and hope they take you on / sponsor you? Do you have to spend lots of $$$ to get things made?

Read the article

CSS on Mouse Down

- by danixd

Usually I would use :hover, but I want my website to be accessible on touchscreen media too. I know I can use :active, but as soon as I let go of the mouse button, it goes back to its inactive state. Effectively I want: Mouse Down : Div goes green Mouse Up: Div stays green Mouse Down: Div goes red Mouse Up: Div stays red Instead of: Mouse Down: Div goes green Mouse Up: Div goes red

Read the article

-webkit- vs -moz-transition

- by danixd

I am using CSS3 transitions on my site and the -webkit- seems to be working, whilst the -moz- is not. Here is the CSS: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; } .mousedown{-webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; } Just using jQeury to add the mousedown class onto the article. Any idea where I am going wrong?

Read the article

jQuery class adding and removing with click and mouseleave

- by danixd

I just want to control a div by toggling a class on click, as well as removing it when the mouse leaves the div. I had it working with mouseout, but when I entered over a child element, the mouseOut triggered, so I know I need to use mouseleave. I am just unsure how incorporate telling jQuery the mouse has entered. Yes I am new to this! Here is my code: $(function(){ $('.main').click(function() { $(this).toggleClass('activated'); }); }); $(function(){ $('.main').mouseleave(function() { $(this).removeClass('activated'); }); });

Read the article

HTML5 validator.w3.org

- by danixd

My site was valid until today, wondering wether it is my site's or the validator's fault. I am getting this message: The error encountered was: 500 Can't connect to localhost:8888 (connect: Connection refused)

Read the article

Wordpress page linking

- by danixd

I am trying to implement WordPress into quite a large site with a complex page structure and struggling to get normal pages to work (not created through the admin) The pages are created, but when I link to them, nothing happens... The desired url - www.website.com/dir1/dir2/dir3/page.php The actual url- www.website.com/wp-content/themes/themename/dir1/dir2/dir3/page.php The problem with linking to the latter is that it breaks the WordPress functions I don't want to have to give every page a template, then add it through the admin, it is too much work. I only need 2 pages to contain dynamic content. Am I being silly? I am really confused.

Read the article

Vertically aligning CSS :before and :after content

- by danixd

I am trying to centre the link with the image, but can't seem to move the content vertically in any way. <h4>More Information</h4> <a href="#" class="pdf">File Name</a> The icon is 22 x 22px .pdf{ } .pdf:before{padding:0 5px 0 0; content: url(../img/icon/pdf_small.png);} .pdf:after{content: " ( .pdf )"; font-size: 10px;} .pdf:hover:after{color: #000;}

Read the article

jQuery relative positioned hover

- by danixd

I want a link to the next or previous image to appear when hovering over the main image, only I want the next link to appear when hovered over the right hand side, and previous on the left. I have looked at jQuery's .position() and I don't think I am understanding it very well. At the moment all I have is general mouseenter/mouseleave events, which show both links when the image is hovered. jQuery(document).ready(function($) { $('.nav-controls a').hide(); $('#slideshow').mouseenter(function() { $('.nav-controls a').fadeIn(500); }); $('#slideshow').mouseleave(function() { $('.nav-controls a').fadeOut(500); }); }); I'd image it to be something like: jQuery(document).ready(function($) { $('.nav-controls a').hide(); var image = $('#slideshow'); var left = image.position().left(0); var right = image.position().left(50%); left.mouseenter(function() { $('.nav-controls a.previous').fadeIn(500); }); left.mouseleave(function() { $('.nav-controls a.previous').fadeOut(500); }); right.mouseenter(function() { $('.nav-controls a.next').fadeIn(500); }); right.mouseleave(function() { $('.nav-controls a.next').fadeOut(500); }); }); Not sure if I should be using position, if I am using it correctly. Any tips would be great. Edit: I do not want to add unnecessary markup in the form of divs, for the left/right selectors.

Read the article

Dynamic HTML body width (over 100%)

- by danixd

I am creating a horizontal webpage and I am trying to make the body dynamically expand according to the content within it. I am building the website here: http://www.obliquo.co.uk/ As you can see it all works, but I am forced to setting a huge body width in pixel value. The content on the page will be changing all the time. If I don't set a width in pixels, the divs start bumping vertically, naturally.

Developer IT