Search the Community

Not sure if this the best forum for this, but here goes: Background: I have an account with Smugmug.com They recently revamped their website. With this revamp, they no longer allow you to add your own Javascript to customize your page. They only allow HTML and CSS modifications. So I created a free website through awardspace that allows me to run JS and PHP scripts. I want to create a way for a client to enter their last name and their password and have their pages opened in new tabs. Question: How do I do this without javascript? I can do it for a single page using PHP, but as far as I can tell PHP cant open multiple tabs... Here's the HTML: <form action="http://myfreescriptingsite.com/ClientSearch.php" method="get"> Name: <input type="text" name="tName"><br> Password: <input type="password" name="tPassword"><br> <input type="submit"> </form> I control the ClientSearch.php file. This could also be an HTML page or a JS file... Here is the ClientSearch.php file: $name = strtolower($_GET["tName"]); $password = $_GET["tPassword"]; switch($name){ case "smitherton": if ($password == "password") {header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2013");} break; default: header("Location: http://www.myrealwebsite.com/Client-Search/"); } Again, the above PHP code only works for one location. I need it to load up multiple pages: if ($password == "password") { header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2011"); #header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2012"); #header("Location: http://www.myrealwebsite.com/Clients/Smitherton/SmithertonFamily2013"); } Any ideas on how to accomplish this? Thanks, Dave

Hi. I have a file upload script and I want to allow css files to be uploaded as well. Here is my code allowing the certain filetipes allowed to be uploaded. || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) When I tried doing this code to allow css files through || ($_FILES["file"]["type"] == "text/css")) it didn't work. Should it? If not, what did I do wrong?

Hi guys, I am new to php programming and need your assistance in developing a registration system for my site .I have developed the registration form using html5 , css, jquery and javascript. and now need a functional php script which is going to work for my registration form. The Registration form includes 4 step process for successful registration of a user.The fields of the form are as follows: First Step: username password re-type password Second step: first name last name email Third step age gender country Fourth step: Summary(displaying all user information which user has given through out the registratioin process) For user viewing,I have included a progress bar, which shows the percentage of completion of the registration process. I have attached the screenshot below for the registration form. Kindly help me in building a functional php script for the registration form. Thanks

How would I go about adding a search feature, css, and a hidden rows feature/next buttons to this table I have written in PHP? There are about 5000+ items listed in this table, so it's crucial that it's a fast search bar. Any help would be greatly appreciated. I was trying to use jquery but everything is messed up and the search + features don't show up. $fp=fopen("csv/inventory4.html",'w'); $write=fputs($fp,$html_body,strlen($html_body)); $i=0; $content = file("webinvt.txt"); foreach($content as $line) { $l=csv_split($line); if(!strstr($l[11],"SET")) { if($i==10) { $tmp = '<tr>'; $write=fputs($fp,$tmp,strlen($tmp)); $i=0; } $onhand = (int)$l[15]; $committed = (int)$l[16]; $avail = $onhand - $committed; $wcdate = substr($l[23],4); $eastdate = substr($l[19],4); if(strstr($l[1],"DISC")) { $html_body ='<tr "> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>'; } else { $html_body ='<tr> <td>'.$l[0].'</td> <td>'.$l[1].'</td> <td>'.$l[12].'</td> <td>'.$avail.'</td> <td>'.$l[17].'</td> <td>'.$l[18].'</td> <td>'.$eastdate.'</td> <td>'.$l[21].'</td> <td>'.$l[22].'</td> <td>'.$wcdate.'</td> </tr>

I'm completely stuck and I need help. I've been trying to create a picture framing utility (for photos etc). where the user can specify the size of their photo, then choose a coloured cardboard mount and a frame type to go around it. The site my client chose for me to create something similar to is this: http://www.ezeframe.co.uk/picture-frames You can see that the user can specify their picture size, frame and mount, and see it taking shape on screen. Where I've come unstuck is the scaling. You can see in the above example that if someone changes their mount size or frame type, they change so that they remain in proportion to the picture size. I've been trying to make my system do the same and I'm failing! I'm sure it's my maths that's wrong but can't work out where. What I've done so far (without scaling) can be seen on the clients live site here: www.vivarti.co.uk/bespoke-frames I've done it mostly using CSS, Jquery and AJAX. The way it works is that I have a fixed pixel area to work within. When the user alters the size of frame moulding, or the cardboard mount, it needs to scale the 'image area', mount and frame in proportion. I've tried doing it using fixed pixel width, percentage width and every other way I can think of, but I still can't get it to work properly. Is there a better way to do this kind of thing than using Jquery, or can anyone help me work out the maths to make my version scale? A tall order I know but I'm just hoping someone can help me! Thanks in advance.

I started having this problem including my base css file into my emails when I minified it. After a brief research I found out that SMTP has a restriction on string length or columns. So I figured I need to add new lines to my css in order to be able to load it into the mails without it getting cut off. $css = str_replace('}',"}\r\n",file_get_contents(base.'css/style.css')); $html = "<style>{$css}</style> ......" style.css is a valid MINIFIED css file with about 9000 characters length. If I debug $css before sending the email I get the full length of the css, however if I inspect the email in my mailbox I see that there are new lines, but the css is still being cut off. If i beautify style.css then the whole style gets included? This is really confusing, I really need some help.. Thanks!

Hi everyone! In my google Adsense page... i have the performance of my website as optimization revenue, website health... In the website health, i have this message: Reduce the size of the above-the-fold content i read a bit, and i saw that i have to use asynchone code : like facebook like button, google+ button, adsense code..... so i have made the change for asynchrone code.. But what about my CSS and my JS? I use <script src="/js/libs/modernizr-2.5.3.min.js"></script> (because i'm using HTML5) and <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> on ALL pages of my website. for Reduce the size of the above-the-fold content, what do you suggest to me for CSS and JS code? Thanks to all!!! have a great night!

Good Day everyone, I have the following menu I've been working on for quite some time. Some parts are based on a tutorial I found on the internet and others are written from scratch. I tested only on chrome so far and I'm not sure about other browsers but when I resize the browser to < 480px, the menu button will show and then if I want to click on docs the sub menu doesn't open and I can't find the solution to this. JSFiddle Code

I want to have completely custom checkboxes and radio buttons. This would entail: 1. a text label 2. a background icon 3. a hover effect 4. an active effect 5. and a click effect I don't want any checkbox or radio icons, I just want them to look like buttons. I have been experimenting with jquery but dont seem to be able to get much further than the default styling. Any suggestions are much appreciated.

I am looking for a webdesigner / coder who can create the basic CSS for a fluid adaptive website. The main layout would be something like the 'Mondrian' example here http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/ navigation design would be something like this. http://www.impressivewebs.com/demo-files/css3-glow-tabs/ At the moment I am too busy with different projects to spend a lot of time figuring out the new CSS possibilities and therefore I am looking for someone to help me. Please contact me by PM on phpfreaks thank you anatak

I have 2 menu div's floating to the right of a canvas. They menus are designed to slide out on hover and slide back to normal afterwards. The problem is that when I hover on the second div, the location (position) of the first div shifts with it. Example of it in action is at: http://jsfiddle.net/Xb2q9/ I know it has to do with the order that the divs are listed and position: relative but haven't managed a work around. My HTML <table class="unpadded-table"> <tr> <td> <div id="screen"> <canvas id="screenCanvas" width="640" height="480" sytle="border:1px soid #000000;" class="example">Your browser doesn't support HTML5canvast</canvas> <div id="firstmenu"> <div id="firstmenucontents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum lacus nec felis condimentum, et feugiat felis adipiscing. In hac habitasse platea dictumst. Integer in felis placerat, porta arcu in, aliquam nulla. In fermentum sed odio sollicitudin lobortis. Morbi id commodo orci. Quisque semper sem in sem bibendum lobortis. Praesent nisl purus, sollicitudin non est vitae, dapibus dictum libero. Nam sem sem, lacinia sit amet quam quis, vulputate facilisis purus. Ut placerat euismod felis, non pharetra libero dictum in. Pellentesque elit est, lacinia sed nibh quis, tempor interdum enim. In ante ligula, bibendum et accumsan ut, sagittis quis purus. Morbi tempor nisi vel feugiat consectetur. Vivamus at porttitor risus, tristique bibendum risus. Nullam vel venenatis lectus. Maecenas quis interdum mauris.</div> </div> <div id="secondmenu"> <div id="secondmenucontents">Etiam varius orci in diam fringilla sollicitudin. Etiam ac vestibulum nisi, at vulputate massa. Proin porta nec metus tincidunt imperdiet. Sed vel pellentesque sapien. Quisque gravida eros eget neque commodo feugiat. Donec ut ante sit amet nisl auctor varius. Phasellus placerat arcu viverra lacus dictum, at lobortis massa dictum. Morbi eget imperdiet mauris. Sed lobortis venenatis turpis. Nulla et orci arcu. Nunc ultrices elit in massa venenatis venenatis. Aenean non nibh id massa hendrerit sodales vitae sed sapien.</div> </div> </div> </td> </tr> </table> My CSS: #firstmenu { float:right; background: url('http://www.bussecombat.com/images/rollover/rollover_10-Anatomy-of-a-bu.gif') no-repeat right top; padding-left: 10px; ; margin-top: 15px; padding-top: 0px; width: 10px; height: 180px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; display: inline-block; } #secondmenu { float:right; background: url('http://www.dailyblogtips.com/wp-content/uploads/googlevert.gif') no-repeat right top; padding-left: 10px; margin-left: 0px; padding-top: 0px; width: 10px; height: 250px; position:relative; overflow:hidden; transition: left 0.5s; -webkit-transition: left 0.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; margin-top: 250px; display: inline-block; } #firstmenucontents{ background: #ffffff; margin-right: 15px; margin-top: 0px; margin-left:0px; width: 135px; overflow:hidden; -webkit-transition-duration:.5s; -moz-transition-duration:.5s; -o-transition-duration:.5s; opacity:0.0; border:1px solid black; float:left; } #firstmenu:hover{ width: 150px; opacity:1.0; } #secondmenu:hover{ width: 150px; opacity:1.0; } #firstmenucontents:hover, #secondmenucontents:hover { opacity:1.0; width: 135px; } .example { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px #000 solid; float: left; width: 655px; margin-left: 100px; width: }

hi i would like to have my css test box attached to the side of the box like it is on the second picture ... any way to do it ? #socialbox { background-color: #FFF; padding: 7px; height:200px; width:35px; border: 1px solid #DBDBDB; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -webkit-box-shadow: #E4E4E4 0px 0px 5px; -moz-box-shadow: #E4E4E4 0px 0px 5px; box-shadow:#E4E4E4 0px 0px 5px; margin-bottom: 5px; /* max-width:50px; max-height:100px; */ float:right; margin-right:180px; }

We have a website with around 1k pages inside it. They all end in .html.. We spent about a year marketing and advertising specific pages of our website all over the net. We are in a process of updating our website, and wish to implement blogs(wordpress) and other useful tools like comments, ratings, etc.. Many of these scripts(widgets) require that the page end in .php in order to make these scripts work. I am trying to keep everything consistent to our advertisement. My question is, is it possible to rename all .HTML files to .PHP and still keep the advertising links? Without having to go to all of our advertising pages and change links..? If so, what would this process be called.. I heard of sync linking and meta refresh, but not sure if this is what we need.

hi all, can anybody please tell me how to add css and js file in head part in magento??? i am using base/template. please need help!!! thanks and regards, jazz

Hi all, I have a page with 3 comboboxes. After selecting options from the three. Onclick of the submit button I would like for an image to load in dynamically for that selection. What would the easiest and best way to implement such a feature ? Any help would be much appreciated ?

In a smaller browser window the css moves in Safari It appears to look fine in other browsers except Safari Take a look at http://tinyurl.com/mvkkcfg? In Chrome the Firefox - Then compare in Safari I just need the OR image to say in the same spot to matter what browser or window size is used here is the code that Im currently using <div style="z-index:10; position:absolute; margin-top:400px; margin-left:335px"> <img src="http://173.83.251.7/~iworeitb/wp-content/uploads/2013/06/or.png" alt="" /> </div> Please help thanks

I have a accordion menu that uses unique IDs for each CSS menu. the accordion menu is not mine but was free from the internet http://www.script-tutorials.com/pure-css3-accordion/ if you look at the CSS you will see this: #tab1:target ~ .tabs .tab1 dd div { height: 100px; } #tab2:target ~ .tabs .tab2 dd div { height: 345px; } #tab3:target ~ .tabs .tab3 dd div { height: 235px; } #tab4:target ~ .tabs .tab4 dd div { height: 235px; } #tab1:target ~ .tabs .tab1 dd a, #tab2:target ~ .tabs .tab2 dd a, #tab3:target ~ .tabs .tab3 dd a, #tab4:target ~ .tabs .tab4 dd a { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc); background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc)); background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%); background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset; } as you can tell each tab has its own unique ID, now I am using PHP array to fulfill my accordion menu to display different information of a single product. My question is that is there a way to turn the CSS tabs into a array so I don't have to add more tags for the same styling? PS. I did modify how it looks for my project, thats about it.

Hello all, Im working on a back-end system that sends push notifications. At the moment on click of send button the loading gif appears underneath. I would like the send button to disappear and for the loading gif to appear as it is now. How can I implement this feature ? Any help would be much appreciated <div class="row-fluid"> <input type="submit" name="badgeSubmit" class="span5 offset7 blue-button" value="Send" onClick='return checkvalue() && toggle(); return false;' /> <img style="position:relative; top:20px;"src="/images/sending.gif" alt="loading" class="sending"> </div>

Hello everybody, I'm working on a back-end system where WordPress is brought in using an iFrame. The iFrame itself is responsive but the editor within the iFrame that wordpress is bringing in isn't responsive. What I'm trying to achieve is an editor (WYSIWYG) that will be responsive for mobile device's. How can I implement an editor that will fulfill these requirements? I'm fairly new to Wordpress but I've worked with PHP and WYSIWYG editors before. I want it to be a safe operation of changing over the editors so that I don't break anything in the application. Any replies and advice would be greatly appreciated Adam

Hi, I'm turning a 2 level nav into a 3 level and running into a few difficulties. The 3rd level displays where and as predicted but when the 'grandparent' is hovered over, not the parent of the items I want displayed. I've been fooling around with the css for a while and I cannot get it to respond how I'd like. Any help is appreciated. There is a fiddle as my explanation might be somewhat lacking. http://jsfiddle.net/6TGaf/ Code from fiddle: #nav{ background: #bada55; width: 99%; margin-top:-5px; } #nav ul{ list-style: none; margin: 0; padding: 0; height: 40px; } #nav ul li{ /*child elements positioned absolutley will be relative to this*/ position: relative; border-top: 1px solid #e9e9e9; float: left; } #nav a{ color: ghostwhite; padding: 12px 0px; /*fill hori space*/ display: block; text-decoration: none; /*apply transition to background property, taking 1s to change it */ transition:padding 1s, background 1s; -moz-transition:padding 1s, background 1s; -webkit-transition:padding 1s, background 1s; -o-transition:padding 1s, background 1s; font-family:tahoma; font-size:13px; text-transform:uppercase; padding-left:20px; } /*hover pseduo class*/ #nav a:hover{ /* RGBA background for transparancy: last number(0.05) is the transparency */ padding-left:35px; background: RGBA(255,255,255,0.05); color:#fff; } #nav ul li:hover ul{ /*diplay when hovered*/ display: block; } #nav ul ul{ position: absolute; left: 0px; top: 40px; border-top: 1px solid #e9e9e9; display: none; /*width: 304px;*/ z-index: 1; } #nav ul ul li{ width: 150px; background: #f1f1f1; border: 1px solid #e9e9e9; border-top: 0; /*float:left;*/ } #nav ul ul li a{ color:#000000; font-size:12px; text-transform:none; } #nav ul ul li a:hover { color:#929292; } /*3rd level...*/ #nav ul ul ul{ position: absolute; left: 150px; top: 0px; border-top: 1px solid #e9e9e9; display: none; /*width: 304px;*/ z-index: 1; } #nav ul ul ul li{ width: 150px; background: #f1f1f1; border: 1px solid #e9e9e9; border-top: 0; } #nav ul ul ul li a{ color:#000000; font-size:12px; text-transform:none; } #nav ul ul ul li a:hover { color:#929292; } #nav ul ul li:hover ul{ /*diplay when hovered*/ display: block; } <nav id = "nav"> <ul> <li> <a href="#">1.1</a> <ul> <li> <a href="#">1.1.1</a> <ul> <li><a href="#">1.1.1.a</a></li> <li><a href="#">1.1.1.b</a></li> </ul> </li> <li><a href="#">1.1.2</a></li> <li><a href="#">1.1.3</a></li> </ul> </li> </ul> </nav>

Hi guys, I have a relatively hard question. The problem is that I must leave the HTML code as it is and not put any divs around the image tags. How can I add a class or a selector to an image tag so that I can style that specific image tag for a specific style sheet. The reason why I'm doing this is because my code is styled in three different style sheets for responsive web design. I need a way to select these image tags using an identifier without affect the html code to go crazy in other layouts. <img src="./ajaxfiles/globebuttons/1xtremevision.png" alt="" name="btn3" id="btn3" onclick="MM_swapImage('car','','./ajaxfiles/carbackgrounds/XtremeVision-E-City.jpg','btn1','','./ajaxfiles/globebuttons/1standardreplacement.png','btn2','','./ajaxfiles/globebuttons/1powervision.png','btn3','','./ajaxfiles/globebuttons/xtremevision.png','btn4','','./ajaxfiles/globebuttons/1bluevisionultra.png','btn5','','./ajaxfiles/globebuttons/1crystalvision.png','btn6','','./ajaxfiles/globebuttons/1diamondvision.png',1)" /> Any help would be much appreciated, please post a way to style these image tags ? All the best, Adam

How to make effective and professional templates in HTML and CSS ? I do it manually and by writing scripts and codes, is there any other way out without using and designing tools ? If one can design effectively with tool, please tell the tool name here ...........

Navigation menu hover for contact is correct in chrome but not in Firefox. See the contact us link onhover at last in menu In firefox the hover is not completely white If i increase padding for ".menu_bar ul li:first-child a" menu comes down I dont know where is the problem. My Link: http://72.29.85.214/~smartweb/teamwork/VPR025/index.php

site http://allar.cmccd.net html <style type="text/css"> @import url("template.css"); </style> <div class="root"> <div class="header-wrap"> <div class="header"> <?php print render($page['header']); ?> </div> </div> <div class="subheader-wrap"> <div class="subheader"> <div class="nav-border-left"></div> <div class="nav-wrap"> <div class="navlink"> <?php if (isset($logo)): ?> <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo" class="logo"> <img src="<?php print $logo; ?>" alt="Jean & Tony’s Place a family website" height="50px" width="150px"/> </a> <?php endif; ?> <?php print theme('links', array('links' => $main_menu))?> </div> </div> <div class="nav-border-right"></div> </div> </div> <div class="body-wrap"> <div class="body"> <div class="content-border-left"></div> <div class="content-wrap"><?php print render($page['content']); ?></div> <div class="content-border-right"></div> </div> </div> <div class="subfooter-wrap"> <div class="subfooter"> <div class="subfooter-border-left"></div> <div class="subfooter-content-wrap"></div> <div class="subfooter-border-right"></div> </div> </div> <div class="footer-wrap"> <div class="footer"><?php print render($page['footer']); ?></div> </div> </div> css: .header-wrap, .subheader-wrap, .body-wrap, .subfooter-wrap, .footer-wrap {float:left; width:100%; clear:both; background:#000;} .header, .subheader, .nav, .body, .subfooter, .footer {width:1100px; margin:0 auto;} .body {float:none;} /* needs a height*/ .header {height:50px; width:960px;} .nav-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/topleft-wire.png) no-repeat right;} .nav-wrap{float:left;celar:both; width:960px;height:70px;} .nav-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/topright-wire.png) no-repeat;} .content-border-left {float:left;clear:left; height:100%; width:70px; background:url(files/images/left-wire.png) repeat-y;} .content-wrap{float:left;width:960px; color:#FFF; font-family:Lucida Grande, Verdana, sans-serif;} .content-border-right {float:left;clear:right; width:70px; background:url(files/images/right-wire.png)repeat-y;} .subfooter {height:70px;} .subfooter-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/bottomleft-wire.png) no-repeat right;} .subfooter-content-wrap{float:left;celar:both; width:960px;height:70px; background:url(files/images/bottom-wire.png);} .subfooter-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/bottomright-wire.png) no-repeat;} .links{margin:0;padding:0;} .navlink {} .navlink li {display:inline;} .navlink a {float:left; height:33px;font-weight:bold;line-height:32.75px; 'Times New Roman', Times, serif; font-size:16px;padding:0 25px; color:#FFF;text-align:center; border-right:1px solid #FFF;text-decoration:none; text-shadow:0px 1px 0px #185edf;} .navlink a:hover {background:url(/sites/all/themes/ssccix/files/nav-arrow.png) no-repeat center top; text-decoration:none;} .navlink a.active {background:#FFF; no-repeat center top;color:#091342;} .footer {} /*.border-left {float:left;height:100%;clear:left; width:2px; background:#fff;} .content-wrap{float:left;height:100%; width:960px; background:#555;} .border-right {float:left;height:100%;clear:right; width:2px; background:#fff;} */ The problem is that as you see the site the content is pushed to the left and the white borders on the left and right disappear, though they will show up if i have a pre-set height in the .body{} but than it will not auto height for the text. any ideas on the problem?

Hi, I am having trouble with a font that I have added to a wordpress site. For some reason whatever I try with font-weight an font-style etc. The font is filling in. I have attached a couple of screenshots so you know what I mean. The css I put in for the nav bar is below. Any ideas? #nav ul li, #nav ul li a, #nav .megamenu ul.sub-menu li.menu-item-custom-content p { font-family:Glowworm; font-weight:normal; font-style:normal; }