Public Forums 71,145 posts

[humusjey Friend humusjeyJoin date: March 2009Posts: 27Downloads:0Uploads:0 Thanks: 3 Thanked: 4 times in 1 posts]

#162106

Hello everyone!

I’m designing a web and I want a full background and I’m doing it this way:

1. Add the .js files into the js folder.
2. Create a block and type the javascript code.
3. Add the block into the layout xml.

This is the block code:


<?php $this->genBlockBegin ($block) ?>

<script type="text/javascript">
$(document).ready(function(){
$(document).bgStretcher({
images: ['../images/bg.jpg'], imageWidth: 1600, imageHeight: 900
});
});
</script>

<?php $this->genBlockEnd ($block) ?>


In my first try the code works fine, with only one exception, the image was showed just in the bg block but not in all blocks. Now is not working anymore =/

Firebug says:
$(document).ready is not a function
$(document).ready(function(){

I don’t know whats wrong I think I need to nest all the blocks in one block but is this a good idea?

Any comment solution or help will be appreciate.

Greets!

[huypl Friend huyplJoin date: February 2011Posts: 162Downloads:0Uploads:1 Thanks: 2 Thanked: 20 times in 20 posts]

#383961

Hi humusjey,
Did you clear the cache? Try to disable the cache in template manager. Can you please show me your live url for checking?

[humusjey Friend humusjeyJoin date: March 2009Posts: 27Downloads:0Uploads:0 Thanks: 3 Thanked: 4 times in 1 posts]

#384137

I do not have a live site, all is in my local =/ but I fixed it 🙂

The thing with the blocks is that what you put inside will only display inside of that block and not in others. So for my design this is what I did:

div#ja-wrapper {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(“../images/bg.jpg”);
background-origin: padding-box;
background-position: 0 60%;
background-repeat: no-repeat;
background-size: cover;
}
@media all and (max-width:1440px) and (min-width:1285px) { // with this you can control the size depending of the screen resolution.
div#ja-wrapper {height:900px}
}
@media all and (max-width:1280px) and (min-width:1055px) {
div#ja-wrapper {height:700px}
}

btw this is what I was looking for about the .js files: http://wiki.joomlart.com/wiki/JA_T3_Framework_2/FAQs#Calling_additional_files_into_the_theme

2 users say Thank You to humusjey for this useful post

1. Phill
2. huypl

[Author]

Posts