Hi! I’m Starx

Question 1

Question by qntmfred

I have the following embedded iframe

<iframe width="100%" height="400" src="reallylongpage.html" />

reallylongpage.html has 2 anchors #top and #bottom

I want my iframe to load reallylongpage.html at the bottom of the page so I did

<iframe width="100%" height="400" src="reallylongpage.html#bottom" />

But this has the undesirable effect of scrolling both the iframe AND the parent page. The parent page shouldn’t scroll at all. This happens in Chrome and Firefox.

here is an example with full code

parent.html

<html>
 <body>
    <div style="padding:100 200;">
      <iframe WIDTH="100%" HEIGHT="400" SRC="CHILD.HTML#BOTTOM" ></iframe>
    </div>
    <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
 </body>
</html>

child.html

<html>
  <body>
    <a name="top" href="#bottom">go to bottom</a><br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    <a name="bottom" href="#top">go to top</a>
 </body>
</html>

this is what i want it to look like
correct

this is what i get instead
incorrect

Answer

Answer by brianpeiris

brianpeiris

This appears to be the de facto behavior in browsers (At least I couldn’t find any written standard about anchors and scrolling).

The browser tries its best to scroll all windows until the desired fragment is visible. (You’ll notice this even when you click on the “got to top” link and also if you add “padding-bottom: 3000px;” to the div in your example.)

Consider using jQuery’s scrollTo plugin which actually manipulates scroll position of the appropriate container for you.

To demonstrate with your own example:

Hosted Demos:

With jQuery scrollTo

Without jQuery scrollTo

Full Source:

parent.html

<!doctype html>
<html>
    <head>
        <title>parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                var iframe = $('iframe');
                iframe.load(function(){
                    iframe.scrollTo('a[name=bottom]');
                });
            });
        </script>
    </head>
    <body>
        <div style="padding:100px 200px 3000px;">
            <iframe width="100%" height="400" src="child.html"></iframe>
        </div>
        <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
    </body>
</html>

child.html

<!doctype html>
<html>
    <head>
        <title>child</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a').click(function(){
                    $(window).scrollTo('a[name=' + this.hash.substring(1) + ']');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <a name="top" href="#bottom">go to bottom</a><br>
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
        <a name="bottom" href="#top">go to top</a>
 </body>
</html>

Answer

Answer by Starx

Starx

Well, its just a confused browser. I did a quick look, and found out that the your name="bottom" has nothing beyond it. As the browser needs to focus on that element and place it window on its top, it didn’t find anything inside the iframe which can scroll the #bottom to the top, so it scrolled the parent, but only to bring the #buttom to top.

I have set a page with your code here it is http://jsfiddle.net/VGN2k/ to explain what I am saying. Check it out

What I have done is added bunch of <br/> after the “#bottom” in order to create space, now browser has space which it can use to bring #bottom on the top.

Question 2

Question by scit

scit

This is quick link to color box example.

i need to change and customize place of color box loading

Any one can help me?

Answer

Answer by Starx

Starx

Here is an example to control the position

$("#colorbox").css("left","200px");

You can use the similar to control left, right, top, down. But the the element must be position absolutely.

Question 3

Question by ina

ina

Need some help with the CSS for generating a grid of perfect squares. Div’s look like this, but I’d like to have each of them look like a perfect square – not a rectangle. Setting width and height in css doesn’t do it. :-

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

.

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

Answer

Answer by Sohnee

Sohnee

You need to combine these style rules to get what you need. The float property ensures they stack in a horizontal row, the block rule allows you to set the height and width of the element and the overflow hidden rule stops it from expanding with the content.

.square {
    float: left;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
}

Answer

Answer by Starx

Starx

Thats unusual

try something like this. It should work

.square {
   width:100px;
   height:100px;
   display:block;
   overflow:hidden;
   float:left;
}

See: http://jsfiddle.net/EyXpC/

Question 4

Question by user409257

user409257

nl2br(); can do for EOL but what about white spaces and/or tabs at the beginning(or not) of line? Is there any function to do this at once? I need well formatted html output of text file.
Thx.

Answer

Answer by Starx

Starx

well may be <pre>....</pre> can do it

also see

htmlspecialchars()

http://php.net/manual/en/function.htmlspecialchars.php

htmlentities()

http://www.php.net/manual/en/function.htmlentities.php

Question 5

Question by Jean

Jean

I have put a logo as the background image in a div

<div id="logo" style="background-image:url(images/logo.jpg); position:absolute; top:20px; left:18%; width:275px; height:100px; cursor:pointer;"></div>

I want to use this as div as a link using jquery

//jQuery code

$('#logo').bind('click',function() {
window.location = "index.php"
});

Neither does the cursor:pointer show up nor does the link work, any ideas.

Thanks
Jean

Answer

Answer by Sarfraz

Sarfraz

Make sure that you wrap your code in ready handler like this:

$(function(){
  $('#logo').bind('click',function() {
    window.location = "index.php"
  });
});

Answer

Answer by Starx

Starx

add display:block; to your css

see an working example here

http://jsfiddle.net/4ceK4/

Question 6

Question by Ryan Pitts

Ryan Pitts

Ok, so this is what i currently have. I have a scrolling gallery of 6 or 7 cars. When you mouse over the cars a little window opens up over the car that has vehicle info and a form on it. These windows are hidden elements that are triggered when the mouse hovers over the respective car. Another thing is that it is only ONE element. The data inside the element and the position of the element changes based on what car is being hovered upon. Hope that makes sense.

My problem is that i have some cars that have really long names. The window is a specific width and height so the name of the car wraps to two lines and pushes everything down. This is a problem because it ends up pushing the content off of the bottom of the window.

This is what i am trying to script out. I want to first get the name of the car. See if it is more than 25 characters long. If it is, then i want to move one of the elements below the name up 20px. This will correct the issue. I know how to move the object based on the length of the name of the vehicle; however, i don’t know how to fire the script on mouseover. If i just fire the script in the head of the page it doesn’t do anything because the data isn’t generated until the mouse hovers over the vehicle so if i try it in the head of the page the length of the name of the vehicle will always read 0 characters.

Any help???

The object that gets hovered on is an <li class="model-flow-item">
The object that is the hidden element is a <div id="model-rotator-form">

Here is the code i’ve been working with:

<script type="text/javascript">
$(window).load(function(){
   if($('#model-rotator-form h2.model-name').text().length > '25'){
      $('#model-rotator-form ul.link-btn').css('margin-top','-20px');
   }
});
</sctipt>

Your thoughts??

Answer

Answer by Starx

Starx

well Ryan try something like this

lets start my assigning a relative hidden element id to your images

for example:

HTML

<img src="mycarpic.jpg" class="yourcarpic" rel='myhiddenelementid'/>

then your js

$(".yourcarpic").mouseover(function() {
      var relelement = $(this).attr("rel");
      var charcount = $("#"+relelement).val().length;
      if(charcount>25) { 
          $("#"+relelement).css('margin-top','-20px');
      }
      else {
         //leave as it is or do something
      } 
});

Question 7

Question by matt

matt

hey guys,
i wonder what i’m doing wrong? I’m working on a ftp-upload with php. if files are uploaded successfully i want to get a confirmation email. just a simple email.

if my connection to the FTP Server was a success i’m calling the sendmail() function! it’s not working!

        function sendmail() {
            $EmailFrom = "do-not-reply@mypage.com";
            $EmailTo = "myemail@mypage.com";
            $Subject = "File uploaded to your FTP Server";
            $Body = "Howdy, files have just been transferred to your Server.";
            // Email Headers with UTF-8 encoding
            $email_header = "From: " . $EmailFrom . "rn";
            $email_header .= "Content-Type: text/plain; charset=UTF-8rn";
            $email_header .= "Reply-To: " . $EmailFrom . " rn";
            $success = mail($EmailTo, $Subject, $Body, $email_header);
            if ($success){
              print "success with EMAIL";
            }
            else{
              print "error with EMAIL";
            }
        }

any idea what i’m doing wrong here? does the $EmailFrom value have to be an actual Emailaddress? It’s just not working. Neither success nor error gets printed out. And nothing of my code AFTER the function-call gets executed.

thank you for your help

Answer

Answer by Starx

Starx

Well if you want to sendmail() when ftp upload is success do something like this

$status = move_uploaded_file($src,$destination);
if($status) { sendmail(); }

What this will do this, first $status will hold the boolean value whether the upload is successful, and if it suceeds then it will call your sendmail() function

Question 8

Question by NeDark

NeDark

I found some time ago a CSS framework like Clever CSS but I don’t remember its name and I can’t find it now.

Do you know CSS Frameworks like Clever CSS? It was like Clever CSS, but more powerful.

Thanks.

EDIT: I have just realized it is actually a css preprocessor, it is like Less CSS too.

Answer

Answer by user194743

user194743

It resembles Sass somewhat:

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.2em

Answer

Answer by Starx

Starx

There are many

check this link, here is a nice review of most popular frameworks

http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

I have used Elements and it is very powerful

http://elements.projectdesigns.org/

Question 9

Question by Clark

Clark

Very new to JS here. When I write PHP I have no problem assigning variables inside a function, but inside a JavaScript function it doesn’t work. Why?

example:

function hello() {

var animal = 'Dog';
document.write(animal);

}

Answer

Answer by DVK

DVK

Are you calling the hello() function anywhere? If not, you will not execute the contents of the function and thus, no write will happen.

Answer

Answer by Starx

Starx

put this snippet inside your function to check if your function is being called

alert('snippet');

If a message box appears, your code should work, but if it does not then the function is not being executed, post some html coding also.

Question 10

Question by Morteza M.

Morteza M.

I need a jQuery plugin for uploading video files. it should generate some pictures out of movie as it is uploading ( not after the file uploaded ). Do you know such a plugin? if there is no plugin with this feature, can you suggest me some tutorials or articles about doing such a thing?

Answer

Answer by Nick Craver

Nick Craver

You can’t (as of this answer) do this in JavaScript, it’s forbidden from touching the file like this (for hopefully obvious security reasons). You can find a flash based solution, maybe, but video editing is still a very intensive thing. For thumbnails, you’re best off doing this server-side.

Your comment dismisses this because it’s “time and resource consuming”…trust me, you doing this server-side correctly and returning a few KB in thumbnails is far faster than flash opening and playing with a video to get thumbnails (then uploading those too). Also consider it from a security standpoint, it’s consistent and prevents your uploader from sending fake thumbnails that don’t match the video at all.

Answer

Answer by Starx

Starx

In My Opinion you cannot find a uploading plugins based on its extension. Like Document uploader, Image uploader, video uploader, game uploader, sql uploader. This is not a genuine question, instead you can a uploader script to upload all these. And what you decide to do, or how you decide to present the uploaded file, its up to you.

Here is a plugin, for all in one purpose

Uploadify

http://www.uploadify.com/

However here are some links which can help

http://blog.amnuts.com/2007/06/22/create-a-random-thumbnail-of-a-video-file/

http://forum.coppermine-gallery.net/index.php?topic=38774.0

http://www.webmasterworld.com/forum88/1371.htm

experienced Software Developer. And this is my blog

Blog Page

Question by qntmfred

Answer by brianpeiris

Hosted Demos:

Full Source:

parent.html

child.html

Answer by Starx

Question by scit

Answer by Starx

Question by ina

Answer by Sohnee

Answer by Starx

Question by user409257

Answer by Starx

Question by Jean

Answer by Sarfraz

Answer by Starx

Question by Ryan Pitts

Answer by Starx

Question by matt

Answer by Starx

Question by NeDark

Answer by user194743

Answer by Starx

Question by Clark

Answer by DVK

Answer by Starx

Question by Morteza M.

Answer by Nick Craver

Answer by Starx

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