Hi! I’m Starx

Question 1

Question by FishBowlGuy

im having a hard time getting the height of lower screen resolution because my screen resolution is 1920×1080 does anyone know how to get the height and width screen resolution?
because my friend has 1024×768 resolution when he checked my work into his computer, its all messed up, this is my only problem when it comes to CSS the height and width.

Answer

Answer by Starx

Starx

It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.

If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

Question 2

Question by loriensleafs

loriensleafs

I’m trying to have a site set up so when the page loads there is a div that dynamically pulls it’s content from a .html page I have set up. I have a bunch of thumbnails at the top and when you click one I want the content from a different .html document to replace what every was in that div that was dynamically loaded into the first time.

To do this I’m trying to use the jquery .load() feature. What I tried to do was set up a function:

<script type="text/javascript"> 
$(document).ready(function space_load() {

$('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
}
</script>

and then tried to launch it using:

onclick="space_load();"

this didn’t work and I was wondering if anyone could help me with this. The other thing I was wondering is if this were to work, would it replace the content that was previously loaded into there? I might be getting a head of myself and it just does this on it’s own.

Answer

Answer by Starx

Starx

First, your code has invalid structure

$(document).ready(function() {    
    function space_load() {
        $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
    }    
    space_load(); //Now call the function
});

However, you can trim it down do this

$(function() {
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html');
});

But, since you want this on click of an element. This is what you need:

$(function() {
    $("#yourlinkid").click(function() {
        $('#SPACE_TOTAL')
           .html('<img src="preloader.gif" />')
           .load('http://www.klossal.com/portfolio/space.html');
    });
});

Question 3

Question by Xander Guerin

Xander Guerin

Has anyone else noticed that when you have the CSS:hover effect applied to an element, hide that element and keep the mouse perfectly still, the hover effect is still present until the mouse moves?

I’ve has a search but can’t seem to find any other threads similar. I know it is probably easy but I cannot find the solution and it will cause me to end up in Bedlam.

To see what I mean, take a look at this Fiddle: http://jsfiddle.net/NsMKN/ and

Click the black box to expand it
move the cursor outside the original blackness like where the red X is
click to hide and keep the mouse cursor PERFECTLY still
notice the black box is still red???

When the cursor moves, the :hover is not applied as it should, but it there a way to do this without having to move the mouse and without having to apply the hover effect using jQuery myself (leaving it to CSS)?

Update: I’ve marked Starx as the answer as it does appear to be an IE thing. Thanks for the help guys.

awesome piccy

Answer

Answer by Starx

Starx

Let me split your code.

<div class="tester">
    <div class="content">
        apple, banana, carrot, lettuce, celery, beetroot
    </div>
</div>

Here, the div .content is inside .tester which wraps itself with respect to the what is inside, on general cases.

.tester:hover
{
   background-color:red; 
}

Your CSS is also applied to the same wrapper div i.e. .tester. So, that when the mouse is over to this part, its background color will change.

$('.tester').click(function () {
    $(this).children('.content').toggle();
});

Now, when you toggle the inner element to make it visible. The dimensions of the .tester will change according to the inner elements. Although it is fixed in your case, DOM also has to consider its children. Try to do the same with this fiddle.

Example Showing the Issue

Due to this reason The the mouse will still be over the div .tester. So, style of .tester:hover will still be applied.

Now, when you the toggle .content, the wrapper div .tester will retain the previous state, until further event occurs.

Browsers like IE, does not seem to update its DOM properties until next event occurs.

Question 4

Question by Sachin

Sachin

This is my validation code

$('#reg_form').validate({
            onkeyup: false,
            errorClass: 'error',
            validClass: 'valid',
            rules: {
                username: {
                    required: true,
                    minlength: 5,
                    //remote: "checkusername.php"
                },
                password: {
                    required: true,
                    minlength: 5,
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    //equalTo: "#password",
                },
                secretQuestion: "required",
                secretAnswer: "required",
                emailId: {
                    required: true, 
                    email: true,
                    remote: "checkemail.php"
                },
                termsConditions: "required",                
            },
            messages:{
                username: {
                    required: "Please enter Username",
                    minlength: "Please enter atleast 5 characters",

                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    //equalTo: "Please enter the same password as above" 

                },
                secretQuestion: "Please select your question",
                secretAnswer: "Please enter your secret answer",
                emailId: {
                    required: "Please enter a valid email address",
                    remote: "Email is aleardy is exists! please try with onother",
                    },
                termsConditions: "Please accept our Terms and COnditions"
            },
            highlight: function(element) {
                $(element).closest('div').addClass("f_error");
            },
            unhighlight: function(element) {
                $(element).closest('div').removeClass("f_error");
            },
            errorPlacement: function(error, element) {
                $(element).closest('div').append(error);
            }
        });

Answer

Answer by Starx

Starx

There is very easy explanation of the remote method on the jQuery plugin page.

As per my suggestions to you! to understand the method better, use the method in expanded form.

emailId: {
    required: true, 
    email: true,
    remote: {
        url: "checkmail.php", //the url of the page you are querying
        type: "post", //the method you are going to use to send the data
        data: { //the data you are going to send
           email: function() { 
             return $("#email").val(); //send the value of email
           }
        }
    }
},

But, your code should work the way it is.

Question 5

Question by user1522624

user1522624

I have a vertical menu. It is .glossymenu . The menu item is accessed using css as .glossymenu a.menuitem . I want to change the background color when the menu item is selected or when the menu item is active. I am trying to use the following JQuery:

$(".glossymenu a.menuitem").click(function(){
  $(this).siblings(".active").removeClass("active");
  $(this).addClass("active");
});

But, I am unable to resolve my issue using this. Any ideas, how to change the background color of the menu item, when it is selected. It should not change when we click outside the menu item in blank area, when the menu is active.
Thanks,
Prasad

Answer

Answer by Starx

Starx

Active state is available in CSS and it much better to use that one instead.

a.menuitem:active { background-color: #c00; }

Question 6

Question by lilian

lilian

i want to know how to connect html pages to mysql database? what are the codes?
i also want to know how to add new data to mysql database when i’m using html page and also how to publish the data?

Answer

Answer by Starx

Starx

HTML are markup languages, basically they are set of tags like <html>, <body>, which is used to present a website using css, and javascript as a whole. All these, happen in the clients system or the user you will be browsing the website.

Now, Connecting to a database, happens on whole another level. It happens on server, which is where the website is hosted.

So, in order to connect to the database and perform various data related actions, you have to use server-side scripts, like php, jsp, asp.net etc.

Now, lets see a snippet of connection using MYSQLi Extension of PHP

$db = mysqli_connect('hostname','username','password','databasename');

This single line code, is enough to get you started, you can mix such code, combined with HTML tags to create a HTML page, which is show data based pages. For example:

<?php
    $db = mysqli_connect('hostname','username','password','databasename');
?>
<html>
    <body>
          <?php
                $query = "SELECT * FROM `mytable`;";
                $result = mysqli_query($db, $query);
                while($row = mysqli_fetch_assoc($result)) {
                      // Display your datas on the page
                }
          ?>
    </body>
</html>

In order to insert new data into the database, you can use phpMyAdmin or write a INSERT query and execute them.

Question 7

Question by user1483487

user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">
  <div>&nbsp;</div>
  <table>

  </table>
</div>

CSS

.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site http://www.apptools.com/examples/tableheight.php
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.

Thanks.

Answer

Answer by Starx

Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

Question 8

Question by Manny Calavera

Manny Calavera

I need to setup my PHP script at the top to disable error reporting for strict standards.

Can anybody help ?

Answer

Answer by Nate

Nate

Do you want to disable error reporting, or just prevent the user from seeing it? It’s usually a good idea to log errors, even on a production site.

ini_set('display_errors', '0');     # don't show any errors...
error_reporting(E_ALL | E_STRICT);  # ...but do log them

They will be logged to your standard system log, or use the error_log directive to specify exactly where you want errors to go.

Answer

Answer by Starx

Starx

All above solutions are correct. But, when we are talking about a normal PHP application, they have to included in every page, that it requires. A way to solve this, is through .htaccess at root folder.
Just to hide the errors. [Put one of the followling lines in the file]

php_flag display_errors off

Or

php_value display_errors 0

Next, to set the error reporting

php_value error_reporting 30719

If you are wondering how the value 30719 came, E_ALL (32767), E_STRICT (2048) are actually constant that hold numeric value.

Question 9

Question by xain

xain

I’m having problem changing the cursor when the page is loaded; my code is:

Event.observe(window, 'load', function() {
    document.body.style.cursor = 'wait';
     $$('select').each(function(s) {
        var ajaxRequest = new Ajax.Request(
            '/some_ajax_proc',
            {

When the page loads, the cursor doesn’t change. However it does with no problem in other event listeners further on such as:

   $('mytxt').observe('change', function() {
      document.body.style.cursor = 'wait';
   }

UPDATE: OK, it DOES change the cursor, but since there’s a document.body.style.cursor = 'default'; after the Ajax loop, it changes it back immediatly so I guess it is a threads issue. Any hints in this case ?

Answer

Answer by Nullpo

Nullpo

Have you tried this?

Ajax.Responders.register({
   onCreate: function() {
                if (Ajax.activeRequestCount === 1) {
                   //Code for change the cursor, something like this:
                   document.body.style.cursor = 'wait';
                }
             },
   onComplete: function() {
                  if (Ajax.activeRequestCount === 0) {
                     // End loading...
                     ....
                  }
               }
});

Answer

Answer by Starx

Starx

Since, you are already using jquery.

$('mytxt').observe('change', function() {
   $("body").css("cursor", "wait");
}

Question 10

Question by Joe

Joe

Let’s say I have a string.

$string = red,green,blue,yellow,black;

Now I have a variable which is the position of the word I am searching for.

$key = 2;

I want to get the word with the position of 2. In this case, the answer would be blue.

Answer

Answer by biziclop

biziclop

http://codepad.org/LA35KzEZ

$a = explode( ',', $string );
echo $a[ $key ];

Answer

Answer by Starx

Starx

A better way to solve this, would be by converting the string into an array using explode().

$string = ...;
$string_arr = explode(",", $string);
//Then to find the string in 2nd position

echo $string_arr[1]; //This is given by n-1 when n is the position you want.

Hi! I’m Starx

experienced Software Developer. And this is my blog

Blog Page

css get height of screen resolution

Question by FishBowlGuy

Answer by Starx

jquery .load() not working onclick

Question by loriensleafs

Answer by Starx

jQuery hide + CSS hover issue with mouse

Question by Xander Guerin

Answer by Starx

How to use remote method of jquery validation?

Question by Sachin

Answer by Starx

Active menu background color

Question by user1522624

Answer by Starx

how to connect html pages to mysql database?

Question by lilian

Answer by Starx

table height in percentage not working

Question by user1483487

Answer by Starx

PHP 5 disable strict standards error

Question by Manny Calavera

Answer by Nate

Answer by Starx

Change browser cursor with Prototype.js

Question by xain

Answer by Nullpo

Answer by Starx

Find the exact word position in string

Question by Joe

Answer by biziclop

Answer by Starx

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