April 29, 2011

How to layout follow content using CSS?

Question by Tattat

Here is the layout I would like to make:

Layout example

‘input’ is 70% width of the screen.
and the ‘second input’ is 70% width of ‘input’.
‘button’ is 30% width of ‘input’.
‘input’ is in the middle of the screen.

How can I do so? Thank you.

Answer by Starx

Do not think this require any special skills. This is a very basic fluid layout. An example

Markup

<div id="wrapper">
  <input type="text" id="firstrow_textbox" />
  <input type="text" id="secondrow_textbox" />
  <input type="button" id="secondrow_button" />
</div>

CSS

#wrapper {
    width: 70%;
}
  #firstrow_textbox { width: 100%; }
  #secondrow_textbox { width: 70%; }
  #secondrow_button { width: 28%; } /* Due to border and all */

Demo

Javascript | How to erase anything (divs, p's, a's, …) which has not class ".destroy"?

Question by Tomkay

How can I make this work with pure Javascript?
Erase everything (divs, ps, as, spans, imgs, …) in the Body section of a HTML document which has NOT the class”destroy”.

PS.: Pure Javascript means: No JQuery or other frameworks..

Answer by naivists

You could walk the DOM recursively and check every node for its class. Something like this

function walk_the_DOM(node) {
    if (node.className && (node.className.indexOf("destroy")>-1)) {
        node.parentNode.removeChild(node);
    } else {
      node = node.firstChild;
      while (node) {
       walk_the_DOM(node);
       node = node.nextSibling;
      }
    }
 };

walk_the_DOM(document.body);

Answer by Starx

If you remove everything, you will remove body, head and others too. So to avoid this you can try the following code using Jquery

Try this

$("body").children(':not(.destroy)').remove();

Custom Radio Buttons

Question by Birowsky

I’m building custom content filtering system using custom radio buttons.
There are some problems that occurred on the way like not being able to keep a radio selected on mouse out’ or ‘on class change’, jQuery’s selector wouldn’t track the new class so an events are not fired, and so on..

This is what I’ve succeeded so far:
http://jsfiddle.net/Birowsky/gVwQf/2/

Hope you get the idea.

Answer by Starx

This is one of the tricks, that has not been successfully completed by anyone without relying onto horrible looking scripting orimages. There are always some catch in every workaround. However, you can check following links.

how to use a photoshop login in asp.net web page?

Question by Ani

I have designed a log-in page in photoshop, saved the image in png format. but I dont know how to use this image in asp.net web page. Please help in this concern or show me the resource or the way I can design a good log-in without compromising on polished look and functionality.

Thanks

Answer by Starx

Changing a PSD Template into a CSS Template is not a easy task as it seems. Comprises may steps.

You have to following steps.

  • Slice the images in your psd template.
  • Export the images
  • Try to minimize the use of photoshop generated slices as less as possible. You should try to recreate the effect using CSS the best you can.
  • You can first try this into Table Structure, which is the default way Photoshop exports the slices and the HTML.
  • Later on, create a table less layout. It should be pretty easy once you have created the table layout.

I am assuming, you know how to find the tutorials, regarding the steps I have mentioned above.

Is this a bit overboard or am I doing the right thing?

Question by Kyle

For logging in:

$username = mysql_real_escape_string(htmlspecialchars(strip_tags(trim($_POST['username'])), ENT_QUOTES));
$password = mysql_real_escape_string(htmlspecialchars(strip_tags(trim($_POST['password'])), ENT_QUOTES));

For inserting data I re-use the same mysql_real_escape_string(htmlspecialchars(strip_tags(trim(...

I feel like this is bad practice because I’m using so many functions… Is this the right way to protect against mysql injection & prevent xss injection? Or is it completely overboard? Everything works fine and nothing is broke–my question really is, am I using things that are obsolete when paired together? Is there only one function that I should use for the job?

Thanks.

Answer by Quassnoi

What if I use <mysecretpassword> as a password?

It will be stripped and anyone will be able to login as me.

I think you should store the username and password as it is and do htmlspecialchars only when displaying them.

strip_tags seems to be unnecessary here at all unless you really dislike usernames like BlaBla aka Yada-Yada <C00lHax0r>

Answer by Starx

Here is what is suggested by most of the answers.

$username = mysql_real_escape_string(trim($_POST['username']));

$password = md5("mysalt".mysql_real_escape_string(trim($_POST['password'])));

Making dynamic sized boxes

Question by Mohsen

I have a quiz that have four options to choose.
Every question have different options and sometimes an option have a long text that doesn’t fit in my fixed size boxes (say div).
I don’t want to have largest possible box to prevent overflow in my boxes. I want to size my box depended on longest option that I have in current quiz and if every option is short enough use fixed sizes that I had.

this is my HTML markup:

<div id="options">
    <div class="option 1">
        <span class="optiontText"></span>
    </div>
    <div class="option 2">
        <span class="optiontText"></span>
    </div>
    <div class="option 3">
        <span class="optiontText"></span>
    </div>
    <div class="option 4">
        <span class="optiontText"></span>
    </div>
</div>

and this is CSS:

#options{ width:800px;}
.option{width:380px; margin:10px;}

Text of optionTexts came from database and I want a jQuery function that size my boxes depended on size of text

Answer by Starx

It’s better you use The Jquery Equal Height Plugin to balance the height of the options.

JQuery will work with Fiddler, but not on my server

Question by user730663

Fiddler Link : http://jsfiddle.net/nLxc4/5/

My code :

<html>

<head>
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function dynamicSearch() {
    var val = $('#search').val();
    if (val == '') val = '.';
    var srch = new RegExp(val, "gi");

    $('.active').each(function(i, el) {
        if ($(this).text().match(srch)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}

$(':checkbox').bind('change', function() {
    var div = this.value.replace('value', '#div');

    if (this.checked) {
        $(div).addClass('active');
        $(div).show();
    } else {
        $(div).removeClass('active');
        $(div).hide();
    }
});

$('#search').bind('keyup', dynamicSearch);
</script>
</head>

<body>

<form>
    <label for="search">Search:</label>
    <input type="text" name="search" id="search"/>

    <input type="checkbox" name="modtype" value="value1" />value1
    <input type="checkbox" name="modtype" value="value2" />value2
    <input type="checkbox" name="modtype" value="value3" />value3
    <input type="checkbox" name="modtype" value="value4" />value4
    <input type="checkbox" name="modtype" value="value5" />value5
    <div class="row" id="div1" style="display:none">Show Div 1</div>
    <div class="row" id="div2" style="display:none">Show Div 2</div>
    <div class="row" id="div3" style="display:none">Show Div 3</div>
    <div class="row" id="div4" style="display:none">Show Div 4</div>
    <div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>

</html>

As you can see, in the fiddler, when you click a check box it displays a particular div. On my home server, nothing happens. Can anyone see why this might be the case? Thanks very much.

Answer by Starx

Jsfiddler, wraps the js code inside $(document).ready() if you choose jQuery as the library. That’s why it is working there and not on your server.

Update the following in your code

$(document).ready(function() {  //This
$(':checkbox').bind('change', function() {
    var div = this.value.replace('value', '#div');

    if (this.checked) {
        $(div).addClass('active');
        $(div).show();
    } else {
        $(div).removeClass('active');
        $(div).hide();
    }
});

$('#search').bind('keyup', dynamicSearch);
}); //And This

What do you look for when selecting an open source solution for the task at hand?

Question by lobster1234

This could get quite confusing if there is a wider range of tools that fit the need – like logging in Java. In general, what would you, as fellow developers consider the so-called litmus test before making a selection between available open-source tools/libraries?

I can think about developer velocity, code documentation, the release frequency, committers’ reputation to name a few. Wanted to reach out to the community and get some more data points.

I apologize if this question belongs to programmers.stackexchange.com, I found that there are more questions tagged with open-source here than there.

Answer by thorsten müller

An active user base is often a good sign. If there is a forum or a mailing list, have a look, how many people use it, if there are recent posts and what kind of problems people have. When developing web sites with Ruby on Rails I had to choose a lot of OSS tools and an active community and answers to problems by the developers are a good sign. People are obviously still using it and problems are solved.

Answer by Starx

My main reason is the resources that are available on the internet.

  • Open Source solution, have good documentation.
  • Tips and Tricks or Tutorial are easily available.
  • Forums and discussion board are maintained in order to support.

Hiding and showing divs depending on variable value

Question by user712027

Can anyone please tell me why the code below is not showing the div ticker? it just shows div main ..

Thanks a lot!

<script language="javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){ 


        $('.ticker').hide();
        $('.main').show();
        $('.other').hide();

    }) 
</script>
<?php

$main = 'ticker';

if ($main=="ticker"){?>
    <script type="text/javascript"> //alert('flag'); //this alert shows ok
        $('.ticker').show();
        $('.main').hide();
        $('.other').hide();
    </script>
    <?php


}

?>
<div class="main">main</div>
<div class="ticker">ticker</div>
<div class="other">other</div>

Answer by Derek

Looks like you’re missing the $(document).ready() from the second script block.

Answer by Starx

Try this

<?php    
$main = 'ticker';    
if ($main=="ticker"){?>
<script type="text/javascript"> //alert('flag'); //this alert shows ok
    $(document).ready(function() {
        $('.ticker').show();
        $('.main').hide();
        $('.other').hide();
    });
</script>
    <?php
}
?>

PHP Session ID the same but variables are lost

Question by Nick

I have a login page that sets session variables upon successful login. The login page then redirects to an admin page. The admin page is able to read session variables just fine. But when I do a jQuery load() function that loads viewUsers.php in the content div the session variables are gone. The weird part is the session id is the same.

I used var_dump() on both the admin page and the viewUsers page. The admin pages shows all the proper variables from the login page but the viewUsers page which is called with a jQuery load() function var_dump of $_SESSION is blank. var_dump of $_COOKIE[‘PHPSESSID’] has the proper ID though, it doesn’t make any sense to me.

This is how I set the session variables.

$_SESSION['userID'] = $userInfo['ID'];
$_SESSION['userType'] = $userInfo['userType'];
$_SESSION['programID'] = $userInfo['programID'];

This is the jQuery

$("#content").load("viewUsers.php");

All pages have session_start() at the very top. The session variables also didn’t work when I tried window.open and window.location instead of a jQuery load() function.

Some how the session variables are getting lost even though I have the correct session id. If anyone could shed any light on this I would really appreciate it!

As of right now I’m populating hidden fields and using a post function instead of load to get around it. I understand this isn’t the best way, but it’s the only way I could figure out how to do it.

Edit:
Here is the top of the index which read the session variables fine.

 <?php
    session_start();
    //require("session.php");
    if(!isset($_SESSION['userID'])){
        header("location: ../login/index.php");
    }
?>

Here is the entire viewusers

    <?php 
session_start();

//foreach($_POST as $name => $value){
    //$_SESSION[$name] = $value;
//}

//echo " session id " . $_COOKIE['PHPSESSID'];
var_dump($_COOKIE);
var_dump($_SESSION);
?>

<?php require("adminFunctions.php"); ?>


<h2>View Current Users</h2>
<?php require("userlinks.php"); ?>
<table id="userTable" class="tablesorter">
    <?php getUsers($_SESSION['programID'], $_SESSION['userType']) ?>
</table>
<script type="text/javascript">

    $('td[name="userID"]').hide();

    //$("#userTable th").click(function(){
        //color();
        //colorTable();
        //color();
    //});

    function colorTable(){
        $("tr:odd").css("background-color", "#c0c0c0");
        $("tr:even").css("background-color", "#ffffff");
    }

    function color(){
        $("tr:odd").css("background-color", "#ffffff");
        $("tr:even").css("background-color", "#ffffff");
    }

    $(document).ready(function(){
        //colorTable();
        $("#userTable").tablesorter({widgets: ['zebra']});

    });
</script>

Another Edit:
Here is the javascript code to load viewusers
The only reason I’m using post is because I set the session variables as hidden fields in order to pass session variables. On viewusers I use a foreach loop to set the session variables. I understand this isn’t secure.
function maintainUsers(){

$.post("viewUsers.php", $("#sessionform").serialize(),function(data){
        //alert(data);
        $("#content").load("viewUsers.php");
    });
}

Answer by Starx

Normally, this sort of error occurs when you dont use session_start() to read the session data.

Try placing (Although, you said you have, I would suggest rechecking)

session_start();

At the beginning of your viewUsers.php

In case, the above is not the case, thenyour current page (the one from which you execute the .load() function) is resetting the session and tampering with the values. Unless you upload the code or find it out, there is no solution for this case.

...

Please fill the form - I will response as fast as I can!