April Code Requests. I know, kinda late.

  • 1
  • Praise
  • Updated 5 years ago
I'm a little late this month but I would like you guys to request some needed codes that you can't find on the web.

About: Hello i'm Shawn, a lot of people don't know this might i'm actually 14. I just wanted you guys to know that. Even though i'm only 14 i'm one of the most experienced JavaScript developer on this forum. Every month I make a new post about code requests. You can request to have me make you a script for whatever you. It's not guaranteed that I can make either because it might take too long to make or I just can't make it because it is not made in JavaScript. It might also be a little too advanced for me. I mean, I've been only using JavaScript for about 1 and a half years.

I hope that you guys will find me useful on this forum.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
  • excited

Posted 6 years ago

  • 1
Photo of Bryan Hamann

Bryan Hamann

  • 3 Posts
  • 0 Reply Likes
Hi, I was referred to this request by the Yola support guys.

Im trying to get one of those 'pop-up' email capture forms to appear when someone visits my site for the first time. The current form yola offers doesn't cater for this.

Is this a difficult thing to do?

Would it be possible to get some code for something like this? Along with an explanation of how to 'tweak' it and use/embed it to get this to work?

Any help or suggestions would be greatly appreciated.

Thanks,

Bryan
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Jot-form will let you create a form in a pop up window or light-box for free.

http://www.jotform.com/

You can then place this in prominent point in your site, with the link reading "First Time User?". You can always create an image which says this, if you wanted it to look a bit more fancy / attract attention.

You can create a pop up window that will pop up automatically when you visit the site, however the danger is once the person who visits their site clears their history, the pop up will show up again.

Anyway many people such as myself, have pop up blockers installed, which means they wouldn't be able to see it anyway. My advice would be to use a lightbox instead. If you're not familiar with a light-box, when in Yola Sitebuilder and you click "Preview" a lightbox is what the preview displays in).
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Thanks for helping me out, Eyes Half Closed.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Hi Shawn,

I share my music for download on my site, and up until now i've just been using Yola's "File" widget, because it's quick and easy. However this means that people have to right click and select "Save Target As" to download. Would there be a way to change this to a single left click to download?

Also is there a code which would allow me to keep using the "File" widget (where it would basically apply the one click download to all files by default) or will I have to stop using that and start using HTML tags for each file?
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Because then I have to explain to people how to unzip a zip folder :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
No. it should automatically Unzip on download and display with the appropriate application. It's a function of recent browsers I think. You can put mp3 files in a zip file for this purpose. They won't compress significantly but will be seen as a zipped file.
Photo of Eyes Half Closed

Eyes Half Closed

  • 62 Posts
  • 17 Reply Likes
Oh sorry zip folder? I thought you mean .zip archive file!
Well cheers guys, I'll give it a try.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I don't know if it'll automatically unzip because by "zip folder" I meant a .zip file, but to unzip (I'm sure you know this)...

On Windows:

Open Windows Explorer, navigate to the .zip file, right click and choose "Extract all" and then it'll unzip.

On Mac OS X:

Open Finder, navigate to the .zip file and double click it.

@Gop: Haha, thanks :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Adapted from a commentary by Jennifer Kyrnin http://webdesign.about.com/od/beginni...


  • Use your operating system compression program to turn your download file into a zip file.

  • Upload that zip file to your File manager.
    resources/{optional folder}/mp3.zip

  • Edit the page where you want the link and add a standard anchor link to the zip file.
    <a href="resources/{optional-folder}/mp3.zip">Download the mp3 file</a>


  • Tips:
    Most operating systems have some compression software built in. If yours doesn't, you can look up "zip files" in a search engine to find a program to build them for you.
    You can use this technique for images, movies, music, and documents as well as PDF files. Anything you can compress as a zip file you can post to your site for download.

    What You Need

    The file to be downloaded.
    Photo of samphillips97

    samphillips97

    • 48 Posts
    • 3 Reply Likes
    ''Ok, would like one last thing, I'd quite like a code to create something similar to the badge tab at the top of my site (www.sssgamingleagues.co.uk) for my other sites to use as a link back to the main site.''

    ''Shawn Holman 7 days ago
    So you want that same looking bar but you want me to make it so other sites can embed it onto their site? You want them to have that whole bar on there site?

    Thanks for explaining,
    Shawn''

    ''samphillips97 7 days ago
    I'd like a version of the tab with the text 'badges' at the top of the page for my other site, with the text 'return to main site' and a link to the page I'd like.''

    Thanks :)
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    I've made you wait 10 days! I'm really sorry. So you wan't that same bar on another site but with a link returning to sssgamingleagues?
    Photo of samphillips97

    samphillips97

    • 48 Posts
    • 3 Reply Likes
    No worries, ideally yes, looking the same but if that's not possible then don't worry, I'd like it on the other side of screen and linked to my main site, would it be possible for me to edit the link if necessary at a later date?
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    Yes, its possible. By other side of the screen do you mean that you want the bar at the bottom instead of the top?
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Hey, I've been searching everywhere for this code but can't find it anywhere or its not accurate. I was wondering if you could make a HTML code that makes an image change based on the time of day "Morning, Afternoon, and Night" so 3 images. Is that possible? That's please resound
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    Hello Legolas, this is possible. I could do this, but i'm busy at the moment. Nathan will be assisting you with this. Nathan is another great helper on the Yola forum.

    Thanks for the reply,
    Shawn
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Ok that's no problem, thank you!
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    *Thanks please respond haha sorry typo
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Hello Legolas,

    Yes, this is possible. :)

    You will need to rename each of the images to "afternoon.jpg", "night.jpg" and "morning.jpg" (if the extension if .gif or .png, don't change the extension only the name before the dot, and you can set the extension in the code below). Once you have done that, make sure you have them uploaded in your file manager and just drag over an HTML widget and paste this into it at the top of your page:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var datetoday = new Date(),
    timenow = datetoday.getTime(),
    ext = ".jpg"; // the extension of the images (i.e. ".jpg", ".gif", ".png").
    datetoday.setTime(timenow);
    var thehour = datetoday.getHours(),
    display = '';
    if (thehour > 18) display = "evening";
    else if (thehour > 12) display = "afternoon";
    else display = "morning";
    $('.greeting_img').html('<img src="resources/' + display + ext + '" />');
    });​
    </script>


    And now, you can place this anywhere on the page in an HTML widget (this way you can display the image in more than one place if you'd like):

    <span class="greeting_img"></span>


    I hope this helps! Let me know if you have any questions or issues.

    -Nathan
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Thank you I will try it right now and see if it works!
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    I tested the code with pictures of the morning, afternoon, and night sky here's what I put but the code doesn't seem to be showing up

    ');
    });
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    
    

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var datetoday = new Date(),
    timenow = datetoday.getTime(),
    ext = ".jpg"; // the extension of the images (i.e. ".jpg", ".gif", ".png").
    datetoday.setTime(timenow);
    var thehour = datetoday.getHours(),
    display = '';
    if (thehour > 18) display = "co.uk/multimedia/archive/01204/Full_moon_1204649c.jpg";
    else if (thehour > 12) display = "http://freeimagesarchive.com/data/media/215/16_sky.jpg";
    else display = "ttp://www.publicdomainpictures.net/pictures/20000/nahled/morning-sky.jpg";
    $('.greeting_img').html('<img src="resources/' + display + ext + '" />');
    });
    </script>
    </pre>
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    Remember to add the other HTML to it:


    <span class="greeting_img"></span>
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Did you remember the last step in my reply above to put that small piece of code somewhere in the page in an HTML widget?
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Add the code that Shawn pasted above somewhere in the page (where you want the image to display) and the longer code at the top of your page (this way if you ever need to add it again within that same page, you don't use that same long code because it will be re-linking to jQuery and redefining the JavaScript variables if you were to add the same long code multiple times on the page).
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Yes I forgot that little piece of HTML, the image shows up as a question mark but I may just have to try a different image if not then it must be the code, but I'll go check it out
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Hmm...I tried a different image but there still appears to be a question mark
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Oh, whoops! I see the problem you are having.

    You need to download those images and upload them to your file manager, then it will work. The reason why it currently is not working is because the browser is interpreting it as something like:


    resources/ttp://www.publicdomainpictures.net/pictures/20000/nahled/morning-sky.jpg.jpg

    (that obviously doesn't exist)

    In each of the parts of the long code, just put everything that is before the ".jpg" for the image name.

    I can modify the code for you if you don't want to upload the images to your file manager, but it is considered band width theft when you link to another server's image (unless they say they allow it) because each time you visit your site it goes to their server to receive the image, therefore it takes some of their bandwidth.
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Thanks for telling me that I didn't know. So even if I copy their image as .jpg am I still stealing some of their bandwidth or is it just if its in the image address form?
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Sorry about the delayed reply.

    It's only if it's the image address. If you save it, it's completely fine because it is hosted on your account. :)

    You can use the first code I posted if you name them each as morning.jpg, afternoon.jpg, and night.jpg and put them in the file manager (you won't have to modify the code if you name them each as that).
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Yes thank you :D Just making sure
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Thanks soooo much! I got it :D
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    You're welcome, I am glad you got it to work :) Feel free to click the "good answer" button on my original reply above. (edit: nevermind, "praise" topics don't have those buttons.)
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Yes, I was looking for the button and was thinking ehh... I don't see it, but thanks again!
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Hey can I request another code where an image puts up at random times; so it doesn't pop up all the time just at random times. Is that possible?
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Do you mean when it is for example the morning it will only show up sometimes when you go to the page but not every time (and the same for afternoon, night)? I can make that. Just confirm that that is what you want. :)
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    It's not for the (morning, afternoon, night) code I was wondering if it could be a separate code, but its just a picture that occasionally appears and occasionally doesn't
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Yeah, I can make that. Give me a 15-30 mins and I'll have it done :)
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    I'm done!

    Just place this code in an HTML widget where you want the image, and change the variable "src" value to the image you want... if it's in your file manager put "resources/image.jpg" (replacing image.jpg with the actual image name).

    <script type="text/javascript>
    
    var src = "http://dl.dropbox.com/u/25819920/happy-face-istock.jpg", // url to image
    rand1 = Math.round(Math.random() * 13000),
    rand2 = Math.round(Math.random() * 10000);
    if (rand1 >= rand2) {
    document.getElementById('special_image').innerHTML = '<img src="' + src + '" />';
    }​
    </script>
    <span id="special_image"></span>
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Ok thanks I'll try it now
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Ok, since you know how to picture shows up randomly and I won't be able to know if the code is working or not because it shows up randomly. Here's what I did could you just make sure its right so I know it will be working:
    
    
    <script type="text/javascript>
    var src = "http://i1169.photobucket.com/albums/r509/WarriorRainstarCat/FireProphecy.jpg", // url to image
    rand1 = Math.round(Math.random() * 13000),
    rand2 = Math.round(Math.random() * 10000);
    if (rand1 >= rand2) {
    document.getElementById('special_image').innerHTML = '<img src="' + src + '" />';
    }
    </script>
    <span id="special_image"></span>
    </pre>
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Yep, that's right. If you keep refreshing the page, you'll see it after a few refreshes or so, but if you refresh it again it will be gone, it is a random thing (as you can see there are 2 random numbers) and it compares it to see if rand1 is greater than rand2, and if it is then it shows it (the "if" statement).
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    I refreshed the page about 50 times and I still didn't see it O.e
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    That's weird - you don't have it wrapped in pre tags right? I see at the end it says "</pre>" but I'm sure that's just because you didn't end the pre tag properly (HTML tags can be modeled as "1221" because if you start a tag it needs to end before a surrounding tag ends, so for example: <span><div>Hello!</div></span>)
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Oh, wait a second! I found the problem. There is a double quote missing in the beginning script tag. The first line should be:

    <script type="text/javascript">
    I'm sorry about that, that is my fault.
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    Ok, thanks I'll try it now
    Photo of Squirrelflight53

    Squirrelflight53

    • 55 Posts
    • 4 Reply Likes
    It works now thanks, I've been looking everywhere for that code
    Photo of Nathan

    Nathan, Champion

    • 3739 Posts
    • 307 Reply Likes
    Glad it helped and that the code I posted above fixed it :)
    Photo of Gop

    Gop

    • 7473 Posts
    • 2115 Reply Likes
    Shawn and Nathan,

    Have either/both of you had any experience with Boxslider? The installation and functional options work straight off the site. The problem is the styling. Things like Prev and Next buttons, pager indicators are all well displayed on various demos (a lot of them) but there is no instruction and I don't understand the styling aspects of it at all. I know it's for people who have more than basic skills with JQuery and I have none.

    If you have the experience and interest with this could you let me know if you would be prepared to look at some styling aspects. If so I will give you the references that I have found. If not or you are too busy then it's not an issue at all.
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    Do you mean adding the html and stuff? Do you know know how to use jQuery?
    Photo of Gop

    Gop

    • 7473 Posts
    • 2115 Reply Likes
    The installation on the bxslider site would be a good model to use
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    Yes. Looking into their actual source. They just simple made there own. They changed the settings to auto controls so they could do their own control. Very stupid. I recommend you find a new jQuery plugin to use.
    Photo of Gop

    Gop

    • 7473 Posts
    • 2115 Reply Likes
    Yes. It's something for very experienced players I think. I have been trying easyslider. A little less sophisticated but it works and produces a nearly as good result.

    Box Slider is the premier product so I was trying to get it going.
    Thanks for looking at this. Shawn.
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    I am a very experienced player ^_^. What are you trying to say?
    Photo of Alamin

    Alamin

    • 3 Posts
    • 0 Reply Likes
    please i have so many clips on my video page. i want my video page to be like this, when any site visitor clicks on any video he/she wants watch, it should be able to enlarge up and centralize automatically so that the video can be watched properly and conviniently and the rest of the videos go small and down below the video that's been selected to be watched by the site visitor. please who knows how i could do this?? Thanks! want it be something like this>>>>>
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    I can do this. But this is something that I would need to install for you. Since I would need a lot more coding for this. I would need to access your site builder and it would be a process that would take more than one day.

    If you want me to do this, email me at: shawn@weebuild.biz and we can talk some more.

    Best,
    Shawn
    Photo of Scott

    Scott

    • 5 Posts
    • 0 Reply Likes
    Hello,

    I was referred to you by a Yola Employee when I asked a question on the forum.
    I was told that you should be able to help me and was given the link to this page, so I hope that you can help me :)

    My original question was:

    Hello,

    I am trying to get a category selector for my website, with the final category you choose sending you to a webpage, but I would like it to be in a smooth format like the eBay one: http://goo.gl/tz7mf

    Can someone please tell me how to do this or give me the HTML code to do this. If this cannot be done then can you please put this up as an Idea and possibly implement it into the site builder?

    -

    Can you please help me with this by giving me the HTML code for this so I can implement it into my website?

    Thank you,

    Scott
    Photo of lhenry

    lhenry

    • 9 Posts
    • 0 Reply Likes
    I currently have the countryside premium style but I actually like the emboutiellage free style in brown. I have a premuim style in order to have the horizontal dropdown submenus. I am tryin to get my website to look just like this emboutiellage css style but in brown that's on this website: http://www.coeymansfire.com/. Therefore, I copied the emboutiellage Site CSS appearing below and pasted it into the countryside premium style css. Where in the language below do I add the CSS codes to make the horizontal dropdown submenus appear?

    For the emboutiellage (brown)

    This reply was created from a merged topic originally titled
    Horizontal dropdown submenu (tried for THREE HOURS!!!!!).
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    CSS only can't do this. You would need to copy the HTML + JavaScript to actually get this to function.
    Photo of lhenry

    lhenry

    • 9 Posts
    • 0 Reply Likes
    Okay. How can that be done? The HTML seems to be grayed out and cannot be changed?
    Photo of lhenry

    lhenry

    • 9 Posts
    • 0 Reply Likes
    How do I edit my site's HTML?
    Photo of Andrew Michie

    Andrew Michie

    • 2 Posts
    • 0 Reply Likes
    I have a html popup box that lets you like your page before entering the site... for some reason it is not working on yola. please help! the code is:

    #fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
    #fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
    .fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
    #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
    #fblikepop #closeable{float:right;margin:7px 15px 0 0;}
    #fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
    #fblikepop #actionHolder{height:30px;overflow:hidden;}
    #fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
    #fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
    #fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
    #fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
    #fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}


    This reply was created from a merged topic originally titled
    How to get like box?.
    Photo of Shawn Holman

    Shawn Holman

    • 486 Posts
    • 26 Reply Likes
    1. Dont blame yola unless you have it working on another site. If you do show me the link.
    2. Not sure how the transitions are suppose to look
    3. You have no HTML at all not even surrounding the CSS so of course it wont show.
    4. There is no javascript, so you couldn't make it Show (if it is hidden) or you can't make it show.

    Please give me more information. The code you posted is just CSS. That just styles everything, you need HTML to actually make stuff display and you need JavaScript to make everything functional.
    Photo of Charlie Mcandrew

    Charlie Mcandrew

    • 2 Posts
    • 0 Reply Likes
    I am wanting to add a pop up window onto my site to promote what products we have for the Christmas season. I am not Computer savvy and have managed to do things on my site by just clicking on random stuff lol so a step by step on how to do this would be great!

    Thanks

    This reply was created from a merged topic originally titled
    How do i add a pop up window onto my site?.
    Photo of Christopher Jones

    Christopher Jones

    • 2 Posts
    • 0 Reply Likes
    I was told you may know how to create some sort of algorithm to shuffle profiles. My goal is when you go to my page http://www.jones4fitness.com/personal... you will see a different trainer appear at the top. My goal being to get equal exposure for them. Let me know if you can help