Scrolling Self Updating New Products

Xhynrae
by Xhynrae · 6 posts
11 years ago in New Products Panel
Posted 11 years ago · Author
Code
<center>
<marquee direction="left" behavior="scroll" scrollamount="2" hspace="5" width="469" height="78">
<style type="text/css">
#xtended_dev_panel_header{ text-align:left; background-color: transparent; }
#xtended_dev_panel_header{ color: #000000; }
#xtended_dev_panel_body{ background-color: transparent; }
#xtended_dev_panel {
margin-bottom: 20px;
border: 0px #CCCCCC;
}
</style>
<div style='display:none'>Extended New Products Panel generated @ <a href='http://gaf210.imvustylez.net'>gaf210.imvustylez.net</a></div><script type='text/javascript' src="http://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=YOUR ID HERE&pn=new&q=7"></script>
</marquee>
</center>


Place your id on this line in the above code:
http://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=YOUR ID HERE


Okay this is the updating scrolling products code that i found to work for me. I'm not a coding person so maybe someone here can tweak it. I highlighted in red where you must insert your Avi ID #'s. FYI it only posts GA products and does take a couple weeks to update from the time a prod passes review, but it does update. I must also credit GAF210 for the extended new products code which i used. Hope this helps someone.
Last edited by DataMine on Wed Feb 27, 2013 4:04 am, edited 2 times in total.
Reason: fixed a slight code error. Moved code to codebox.
Posted 11 years ago
Thanks for sharing. I fixed a small code error and put the code into a code block. Please use code boxes when posting code as it separates it from your text and also condenses your pose a bit.

If you don't want to wait for their long update period, here is the code it generates so you can make this thing yourself and edit it whenever you please:

Code
<html>
<head>
<style type="text/css">
#xtended_dev_panel_header {
text-align:left;
background-color: transparent;
}
#xtended_dev_panel_header {
color: #000000;
}
#xtended_dev_panel_body {
background-color: transparent;
}
#xtended_dev_panel {
margin-bottom: 20px;
border: 0px #CCCCCC;
}
.productbox {
height: 80px;
width: 90px;
text-align: center;
float: left;
margin-left:3px;
margin-bottom:10px;
}
.productbox img{
border: none;   
width: 90px;   
height: 72px;
}
/* Product panel by gaf210 - http://gaf210.imvustylez.net */
</style>
</head>
<body>
<center>
<marquee width="469" hspace="5" height="78" scrollamount="2" behavior="scroll" direction="left">

<div style="display:none">
Extended New Products Panel generated @ <a href="http://gaf210.imvustylez.net">gaf210.imvustylez.net</a>
</div>

<script src="http://gaf210.imvustylez.net/newprodsbanner/filtered_dev_panel.js.php?dev_id=YOUR ID&amp;pn=new&amp;q=7" type="text/javascript"></script>

<div id="xtended_dev_panel">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="6" cellpadding="0" border="0" id="xtended_dev_panel_header">
<tbody>
<tr>
<td class="paneltitle"><span class="paneltitletext">My New Products</span></td>
<td class="panelmenu"><a href="http://www.imvu.com/catalog/index.php/manufacturers_id/YOUR ID">View all</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="xtended_dev_panel_body">
<br style="line-height: 3px">
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
<div class="productbox">
<a href="PRODUCT PAGE URL"><img title="" alt="" src="PRODUCT IMAGE URL"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</marquee>
</center>
</body>
</html>
Posted 11 years ago
xhynrae wrote:
Woot!! DM you rock!!! Thank you...Code my brain and give me your knowledege...am willing to learn.


You're welcome.

This version I wrote is smaller and uses javascript to pause the marquee when you hover your mouse over it so your visitors can see your product images.

Code
<html>
   <head>
      <style type="text/css">
         #container {
            border: 0px solid red;
            width: 420px;
            height: 131px;
         }
         #title {
            border: 0px solid green;
            float: left;
            padding-left: 5px;
         }
         #products {
            border: 0px solid purple;
            float: left;
         }
         #footer {
            border: 0px solid orange;
            float: right;
            padding: 5px 5px 0px 0px;
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="title">
            <span>My New Products</span>
         </div>
         <br>
         <div id="products">
            <marquee width="420" hspace="0" height="78" scrollamount="5" behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
               <table>
                  <tr>
                     <td><a href="" target="_blank"><img src="image.png" /></a></td>
                     <td><a href="" target="_blank"><img src="image.png" /></a></td>
                     <td><a href="" target="_blank"><img src="image.png" /></a></td>
                     <td><a href="" target="_blank"><img src="image.png" /></a></td>
                  </tr>
               </table>
            </marquee>
         </div>
         <br>
         <div id="footer">
            <a href="" target="_blank">View All</a>
         </div>
      </div>
   </body>
</html>
Posted 10 years ago
Awesome...Thanks
Posted 5 years ago
where the codes are placed and where I put my creator id thanks

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT