March Code Requests! Request for Codes.

  • 2
  • Praise
  • Updated 6 years ago
Hello,

I am doing another code request. Even if i'm not using yola any more I still feel like I wan't to help the Yola team out. By helping you guys out.

I love Yola, and the reason I don't use it, is because once you know html and CSS, you can start designing your own sites without site builders. As I said in another post Yola has really helped me out. But I could have never done it without Nathan (champ). About two years ago I emailed him about him old site (nathansmusicstudio). Because I though it was awesome. That's when I started getting familiar with HTML. After I got the basics of HTML he helped me in learning CSS. After CSS he helped me in JavaScript. And now he is assisting me in learning PHP.

Hes an amazing person and designer.

Haha, anyways, back to the requests.

I recommend requesting for JavaScript codes. OR
CSS or HTML Help?

PHP codes might be a little time consuming because I will be working on my website while helping your guys with codes.

I hoping I can get my website done soon.
Just to let you know: My website will be called "jDrag". This is because the jQuery plugin I developed is "jDrag". This site will be where you can download it. jDrag is a plugin that will allow you to make DOM elements on the page draggable. jDrag has many features that will make it just amazing.

------------------------
If you guy's wanna take a little at the system then you can go here:

jdrag.x10.mx
------------------------

Have a Nice day and get to requesting ;P,
Shawn Holman.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
  • excited to see what kind of requests I will get :)

Posted 6 years ago

  • 2
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Still waiting :)
Photo of samphillips

samphillips

  • 14 Posts
  • 4 Reply Likes
Yes I'm First, I'd love a code for a return to top button, similar to the scroll to top button extension for google chrome, I have no experience in JQuery so was wondering if you could help :)
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Samphillips,

How do you like this: http://jsfiddle.net/Sn7qm/1/show

Please reply if thats how you want it and I give you the code for it.

Best Regards,
Shawn
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
Yes thats perfect Shawn, thanks
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
For this to work you must have the jQuery code on your webpage.

If you have it already enter this in the site tracking code:


<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>



If you don't have Yola silver then you can just put that in the HTML widget which you will need to open.

Open an HTML widget on the page. Now this code is really simple.

First we will do the CSS. The CSS will make the back to top button have style.


<style type="text/css">
#toTop {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity:0.00001;
width:100px;
background-color: #EEEEEE;
background-color: rgba(238, 238, 238, 0.7);
text-align:center;
padding:5px;
position:fixed;
bottom:10px;left:10px;
cursor:pointer;
color:#444;
text-decoration:none;
border:1px solid #C9C9C9;
}​
</style>



Next we add the JavaScript:


<script type="text/javascript">
$(document).ready(function() {
var top = "Go to Top";
$('body').append('<span id="toTop">' + top + '</span>');
var a = $("#toTop");
if ($(window).scrollTop() > 30) {
a.fadeIn(1e3)
}
$(window).scroll(function() {
var b = $(window).scrollTop();
a.css({
opacity: b / Math.round((((($(document).height() / 3) + ($(document).height() / 8)) - ($(document).height() / 13)) / 2) * 2.11),
display: "block"
})
});
a.click(function() {
$("body,html").animate({
scrollTop: 0
}, 1e3)
});
});
</script>



If your interested in learning how this code works than you can ask.

That's it. Add those two pieces of code to all the pages you wan't this button to appear.
Also, there is no HTML. So to change the text of the Go to Top button you must change 1 line of code in the JavaScript.

Simply change:

topText = "Go to Top"; << This on the 3rd after the <script type="text/javascript">

To:

topText = "Your text here"; << You need the quotes.

I also recommend just adding these two pieces of code in the site tracking code, if you have it.

If you have any issue's I will assist you.
Remember, if your interested in learning how this code works. Or you want me to help you learn jQuery. Then I will be glad to.

Also, you may look at the code in a neater format and the Yola Editor colors here:

http://jsfiddle.net/NUgfV/

Best Regards,
Shawn
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
Thanks, that looks great, I do have Yola Silver yes, what is the tracking code you mentioned and how can I get one, also when putting the CSS and Javascript in to the html widget do they have to go in simply one after the other?
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
The site tracking code is not an actual code. Its a tool on yola.

How to get there:

1. Go to the Site Settings:



2. Under the Tracking, click on "Site Tracking Code"



3. In the textbox under the words header you can enter the code. And then you can click the X button and it will save and apply to all pages.



And yea, put the CSS code, then the JavaScript and your done.
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
Super, Ive put that it, however as I have a wibyia menu bar I need the button to be placed slightly higher up the screen, what do I need to change?
Thanks
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
In the CSS find:

bottom:10px;

This is telling the page to put the button 10 pixels from the bottom of the screen.

The higher the number, the farther it will be away from the bottom.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Did you get it all done Sam?
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
Oh sorry thought I had replied, yes it perfect, thanks :)
Photo of Pierre Jalon

Pierre Jalon

  • 3 Posts
  • 0 Reply Likes
is there any way to adjust my title ? its very bland id like to make it in to a picture title www.discodoubletake.co.uk
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Would you like the HTML or JavaScript way?
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
I will help you if I know whether you want the HTML or JavaScript. The HTML way will be easier and will not make the page load too much slower but its your choice.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
You could just insert an <img> tag into the header if you want to replace the text with a logo or something. For example:

<img src="resources/image.jpg" />

You would need to change "image.jpg" to the actual image name plus the extension that you have in your file manager.

I hope this helps.
Photo of Carrie Gilley Norton

Carrie Gilley Norton

  • 7 Posts
  • 1 Reply Like
I have a customer I have built a site for that wants some really great photo work on the site, and I am not a graphic artist. I need some code that will allow me to link the photos, that will be something that will allow photos with comments to fade in and out that will thrill her! I am good enough with code, but not so much with imagination or photo stuff. She also wants music to play, expect I can figure that out too. The site is www.housewherejesusshines.org
Photo of Carrie Gilley Norton

Carrie Gilley Norton

  • 7 Posts
  • 1 Reply Like
I'm not really sure just what I am looking for, I just figure when I see it I will know LOL! I am looking at photobucket, I just really don't know, other than, something like a rolling picture, alternating with a testimonial blurb, then on to the next picture, that could be minimized or maximized by the viewer, but always available without being intrusive... sorry I don't really know how to express it any better than that yet.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
So like an Image slider. After like 15 a new image and testimonial appears?
Photo of Carrie Gilley Norton

Carrie Gilley Norton

  • 7 Posts
  • 1 Reply Like
Exactly like that Shawn! I did find that photo bucket has some functionality that I can probably make work, had not ever been to that site before, but would be glad to know of another alternative if you know of one!
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
How about I help you install this image slider:
http://www.idangero.us/cs/
It has 192 animations and many of them are animations I could never make. Check out the demos on that page!
Photo of Bernhardt

Bernhardt

  • 70 Posts
  • 0 Reply Likes
Shawn I would be interested in this :)
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Can someone provide some custom CSS I can add so that I have maybe a darker background on the site navigation? The site is pigoutinmaysville,com. Thanks Yola!

This reply was created from a merged topic originally titled
CSS for Navigation.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello nathan,

replace your: div.ys_nav ul li a

with this CSS

div.ys_nav ul li a {
color: #CCCCCC;
display: inline-block;
font-size: 16px;
margin: 0 14px 0 10px;
text-decoration: none;background:#000;
opacity: .3; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=30)”; /* ie 8 */
filter: alpha(opacity=30); /* ie lt 7 */
-khtml-opacity: .3; /* safari 1.x */
-moz-opacity: .3; /* ff lt 1.5, netscape */
}

This will place a mask screen behind your nav titles. I have included a transparency feature to reduce the contrast but allow reading. You can remove this if you wish.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Thank you for the help Gop :)

Nathan sorry Gop beat me too it. Very Busy Week :/

Best Regards,
Shawn
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Is there a way I can get it to span the whole banner width (930px), not just the individual text? Sort of like a bar?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Solid black bar all of the way across would be good. Thanks
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
It would be really nice if I could:

Have the border around the body and the banner (black splatter) around like a long black bar for behind the navigation text.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Replace your: div.ys-header
with

div.ys-header {
text-align: left;
background:#000;
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You can change the opacity to a more suitable value if you wish.

The opacity changes both the text and the background as I haven't tried to set separate Z levels for the two. This could be done by experimentation I think if wished.

You could probably even style the black background to the splatter if you want to.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Something like this. (just did it in photoshop)

Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
I just created a graphic using the raw files from the site template. I will post it as a .png for clear background.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Here is the png.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
That's the problem. The image is there. Look Close. Tilt your screen back to see it better. It has light opacity.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Change the opacity as I have suggested to nathan :)
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
How can I fix it Shawn and Gop the geniuses?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey guys

If you need to fix the issue that is on here http://jsfiddle.net/dbYwD/1/ (the problem with it not showing the full image) just set a height for the element so the full background image will show. I set the height to 130px in this and it is showing: http://jsfiddle.net/dbYwD/2/

Hope this helps.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Whoops... I just read the rest of the thread and see that you guys already solved it LOL.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
What is the width of the panel nathan? I'll resize the image.
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
What do you need the width of?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
1,055px for image width
955px for black space where text should be
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
So would you like the panel as the longer or the shorter?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
I wan the navigation text to fit in the 955px of black in the picture.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The text will fit. What I would like to know is the width of the black panel background to go behind the text. It's your call as I can make it any size. I want you to tell me what size you would prefer this? :)
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Try 1,010px thx
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes


nathan try this now with the code I gave you re background-image
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Nothing shows up. I need to change the size of the navigation div also (to a different height).
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
To like 109px.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It is 109 px high. Please adjust or remove the opacity statements and see how that goes?
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Figuring it out a little bit!

Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
Check it out now!!! Could take a little more tweaking but pretty-dag-on good!

http://pigoutinmaysville.com/
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
It's good. Good work Shawn
Photo of Nathan Henderson

Nathan Henderson

  • 157 Posts
  • 3 Reply Likes
My name is nathan, but ok! haha
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Haha.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Apologies. I meant Nathan.
Photo of WLD

WLD

  • 26 Posts
  • 0 Reply Likes
I'd like some help with this splash page html, but i'd like to do it over email if this is possible? >.<
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Splash Page HTML? Sorry I don't know what this is, but I may be able to assist you at: shawn@weebuild.biz. Just email be and explain a little more.

Thanks,
Shawn
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
It's me again, I've been looking at the new Yola Homepage is there any way to edit the sizing of the top of the page to 100% (for a flash banner etc) and have the rest say 80% or the default on my site at the moment?

www.sssgamingleagues.co.uk
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Are you going to put it as a header? Like a banner in general? Do you want it inside or outside the red part?
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
Yes it would have it outside the red bit if I could make it full width (I'd change the shape to make it more like Yola.com's flash banner. On the homepage I would have a main banner like already there and on other pages I would have the same design but just with navigation, I've got all that sorted out just need to work out how to change the width for the top part of each page
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
I would also like it at the top of the page (no space like there is at the mo)
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
You can't you will need to use an HTML widget and then position the banner in the right place.
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
So there is no way to get a banner is that sort of position top of screen 100% width even using CSS
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.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
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
Photo of samphillips97

samphillips97

  • 48 Posts
  • 3 Reply Likes
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
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 Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Can you please post in on the new request post: http://forum.yola.com/yola/topics/apr...
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 Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Can you please post in on the new request post: http://forum.yola.com/yola/topics/apr...