Advertisement:
« previous next »
Pages: [1]

Author Topic: if (screen.width>1024)  (Read 12590 times)

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
if (screen.width>1024)
« on: April 01, 2013, 01:03:14 am »
This is not working, can someone help?  If it worked it would show the ads if your screen width was greater than 1024.  Right now it acts like the code does not exist. No errors.  It shows the ads not matter what the screen width is.


<script>

if (screen.width>1024)
{
<div style="width: 160px; height: 600px; position:fixed; left: 0px; top: 10px;" id="advert">
    <?php show_ads('sidead1'); ?>
<div style="width: 160px; height: 240px; position:fixed; left: 1175px; top: 10px;" id="advert">
    <?php show_ads('sidead2'); ?>
<div style="width: 160px; height: 240px; position:fixed; left: 1175px; top: 260px;" id="advert">
    <?php show_ads('sidead2'); ?>
}

 </script>
Logged

Noosa

  • Jr. Member
  • **
  • Posts: 55
Re: if (screen.width>1024)
« Reply #1 on: April 01, 2013, 12:56:06 pm »
This should get you where you want to be, but a few things to keep in mind:

Element id's need to be unique. Instead use a class.
In your code example you don't have closing tags for your div's.

Here are two ways of getting what you want.

jquery:
add a rule to your stylesheet:
Code: [Select]
.advert {
    display: none;
}
Code: [Select]
$(document).ready(function() {
    if($(window).width() >= 1024) {
        $('.advert').show();
    } else {
        $('.advert').hide();
    }
});

css way using a media query (note: older browser don't support media queries):
within your stylesheet add
Code: [Select]
    @media screen and (max-width: 1024px) {
    .advert {
        display: none !important;
    }
}
gl :)

Logged

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
Re: if (screen.width>1024)
« Reply #2 on: April 02, 2013, 11:43:46 pm »
This code shows the ads <?php show_ads('sidead1'); ?>

where do I put that in your code?


Thanks

Rodney
Logged

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
Re: if (screen.width>1024)
« Reply #3 on: April 03, 2013, 01:14:18 am »
This is what I am using now in my main.php file

<div style="float:left; z-index:-1;position:fixed; left: 0px; top: 10px;" id="advert">
    <?php show_ads('sidead1'); ?></div>

<div style="width: 160px; height: 240px;z-index:-1; position:fixed; left: 1175px; top: 10px;" id="advert">
    <?php show_ads('sidead2'); ?></div>
<div style="width: 160px; height: 240px; z-index:-1;position:fixed; left: 1175px; top: 260px;" id="advert">
    <?php show_ads('sidead2'); ?></div>

This is working but I only want those ads to show if your screen is bigger than 1024
Logged

Noosa

  • Jr. Member
  • **
  • Posts: 55
Re: if (screen.width>1024)
« Reply #4 on: April 03, 2013, 03:59:48 am »
Quote from: annstradingpost on April 02, 2013, 11:43:46 pm
This code shows the ads <?php show_ads('sidead1'); ?>

where do I put that in your code?


Thanks

Rodney



Because your divs have a fixed positioned, you can place those divs wherever you want within the body tags.

Sample page would look something like this, note you can add the styles to your stylesheet rather than including them in the head:

Code: [Select]
           
<html>
    <head>
        <style>
            .advert {
                display: none;
            }   
            .side-ad-1 {
                width: 160px;
                height: 600px;
                position:fixed;
                left: 0px;
                top: 10px; 
            }
            .side-ad-2 {
                width: 160px;
                height: 240px;
                position:fixed;
                left: 1175px;
                top: 10px; 
            }
            .side-ad-3 {
                width: 160px;
                height: 240px;
                position:fixed;
                left: 1175px;
                top: 260px; 
            }
        </style>
    </head>
   
    <body>
       
        <div class="advert side-ad-1">
            <?php show_ads('sidead1'); ?>
        </div>
       
        <div class="advert side-ad-2">
            <?php show_ads('sidead2'); ?>
        </div>
       
        <div class="advert side-ad-3">
            <?php show_ads('sidead2'); ?>
        </div>
       
        <script>
        $(document).ready(function() {
            if($(window).width() >= 1024) {
                $('.advert').show();
            } else {
                $('.advert').hide();
            }
        });
        </script>

    </body>
</html>

Keep in mind you cannot use multiple id's with the same name, for example id="advert". Note that I changed advert to a class for the process to work.

If after implementing the changes the ads don't show, verify that your function is returning or echoing the ad. You can do this by simply adding echo in front of the function like so
Code: [Select]
<?php echo show_ads('sidead2'); ?>
Logged

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
Re: if (screen.width>1024)
« Reply #5 on: April 03, 2013, 05:51:40 am »
Ok, thanks for the help. this worked.  Now I want it to show a top ad instead of the side ads when the screen is 1024 or smaller.

I added this to the head

<style>
            .adverttop {
                display: none;
            }   
            .top-ad-1 {
                width: 728px;
                height: 90px;
                position:fixed;
                left: 200px;
                top: 5px; 
            }
           
           </style>

I am not sure how to add it to the body and the else

Logged

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
Re: if (screen.width>1024)
« Reply #6 on: April 03, 2013, 05:57:42 am »
added this to your code

<div class="adverttop top-ad-1">
            <?php show_ads('topad1'); ?></div>

} else {
                $('.adverttop').show();

didn't show the top ad
« Last Edit: April 03, 2013, 06:00:46 am by annstradingpost »
Logged

Noosa

  • Jr. Member
  • **
  • Posts: 55
Re: if (screen.width>1024)
« Reply #7 on: April 03, 2013, 02:47:40 pm »
Quote from: annstradingpost on April 03, 2013, 05:57:42 am
added this to your code

<div class="adverttop top-ad-1">
            <?php show_ads('topad1'); ?></div>

} else {
                $('.adverttop').show();

didn't show the top ad

You're almost there...just need to adjust your javascript a bit.

Code: [Select]
<script>
$(document).ready(function() {
// if greater than 1024
if($(window).width() > 1024) {
$('.advert').show();
} else {
$('.advert').hide();
}

// if less than 1024
if($(window).width() < 1024) {
$('.adverttop').show();
} else {
$('.adverttop').hide();
}
});
</script>

Your style looks good and your html would just be
Code: [Select]
<div class="adverttop top-ad-1">
<?php show_ads('topad1'); ?>
</div>

without the else part

I haven't tested but should be good to go, gl :)
Logged

annstradingpost

  • Jr. Member
  • **
  • Posts: 76
Re: if (screen.width>1024)
« Reply #8 on: April 07, 2013, 02:23:37 am »
Everything is working. thanks alot for your help. I have a mobile ad code. how can I add php to a widget?

<?php

$GLOBALS['google']['client']='ca-mb-pub-3755957512005773';
$GLOBALS['google']['https']=read_global('HTTPS');
$GLOBALS['google']['ip']=read_global('REMOTE_ADDR');
$GLOBALS['google']['markup']='xhtml';

?>

when I make the widget with this code all it does is print the code on the web page.
there is more code then that. I just gave you the beggining of it.
« Last Edit: April 07, 2013, 02:25:56 am by annstradingpost »
Logged
Pages: [1]
« previous next »