Bar CSS3
Автор: Tiffany R.
Просмотрено 2665,
Подписчики 2,
Размещенный 0
I want to add CSS3 bar in website x5 10 , how to add ?
http://sarahjustine.com/2013/03/24/animated-progress-bars-with-css3-2/
Thanks!
Размещено
Better to usejquerysoit workson all browsers, CSS3onlybrowserwithnew...
http://www.html.it/demo/javascript/23704/demo_index.html
Hello Tiffany
To add this into X5, use the "HTML and Widgets" object.
Now, to get it running right, I would recommend using the 3-party CSS file, that comes with the download.
You should rename the "style.css" to "bar.css" or something to not overwrite any X5 generated css files.
If you want the bars to be on more than one page, simply insert the links in Step 1 - General settings --> Expert (This page is placed in the right top cornor)
The link should look like this:
<link rel="stylesheet" type="text/css" href="bar.css" /> (If you have called your css file this)
After this, simply upload the bar.css file to your domain.
Henrik
Btw. this is what you should insert in the "HTML and Widgets" object:
100% Fill, Aqua Gradient This is the text above the bar
<div class="barBg"> This is the tag for "Bar"
<div class="bar hundred aquaGradient"> this line sets how much of the bar that's filled.
<div class="barFill"></div>
</div>
</div>
To change the percentage of the filled bar, use e.g. ninety or seventy instead of hundred.
Regards,
Henrik
Автор
Thanks Henrik Hansen .
Can you capture step by step way of telling me ? Thank you!
Because it seems did not succeed .
About add jquery script , how to add? i have script .
Hi Tiffany
Could you please explain what you want to achieve with the bars? It's hard to give you a stepwise tutorial if I don't know what you want them for
Автор
example: http://themeforest.net/item/carrots-multipurpose-responsive-html-template/full_screen_preview/5359717 Progress
Ah, okay - It's for your portfolia site, right?
You need to download the files from http://sarahjustine.com/2013/03/24/animated-progress-bars-with-css3-2/ - and unzip them to your desktop.
Afterwards, you should upload the style.css to your domain.
Then just follow the instructions I wrote above.
It works fine, have tried it out myselve http://webwawes.dk/bars/
Henrik
Автор
Thank you very much !!!
In addition , I have this http://fjdx1.sc.chinaz.com/Files/DownLoad/webjs1/201307/jiaoben1179.rar script . But it is jquery
also same way add?
In this case you should link to the .js file in the expert tab in Website X5.
The link should look like this, if you upload the script to the root:
<scripttype="text/javascript" src="jquery.carouFredSel-6.0.4-packed"></script>
There are also some work to do in the index.html file, while there are a lot of CSS you can customize.
To get it working, I would suggest taking all the css codes and putting them in a seperate css file, and name it something like "swipe.css" (Dosen't matter)
Then link to that in the header also.
Then you should use the "HTML and Widgets" object to call the function, with this:
<div id="wrapper">
<div id="pager"></div>
<div id="tabs">
<div id="blue"> # The id is for the browser to know what picture we should look at when clicking.
<img src="img/blue_muffin.png" alt="blue_muffin" width="148" height="185" /> # this should be changed to your picture, and the values should be set
<h3>Your headline goes here</h3>
<p>Your text goes here</p>
</div>
<div id="pink">
<img src="img/light_pink_muffin.png" alt="light_pink_muffin" width="151" height="245"/> # you link to the next picture here
<h3>Sesame snaps</h3>
<p>Sesame snaps tootsie roll donut. Sweet roll candy canes chocolate bar wafer sweet roll gummies topping gummi bears. Pudding cheesecake cookie. Muffin sweet roll tart tart muffin. Pastry pudding marshmallow cupcake cake toffee toffee bonbon topping. Apple pie cupcake caramels. Icing chocolate bar lemon drops caramels bonbon bear claw.</p>
</div>
<div id="white">
<img src="img/white_muffin.png" alt="white_muffin" width="144" height="153"/>
<h3>Apple pie jelly</h3>
<p>Apple pie jelly gingerbread gummies topping. Gingerbread jelly marshmallow oat cake wafer lollipop. Cupcake chocolate cake apple pie. Caramels lollipop croissant bear claw brownie carrot cake wafer halvah lollipop. Candy canes tootsie roll jelly-o. Liquorice sugar plum sweet icing tiramisu.</p>
</div>
</div>
</div>
Автор
Thanks , I will try . you have add success ? (Demo)
Yes:
http://webwawes.dk/Tiffany/index.html'
The background however can't go all the way out because of Website X5 CSS.
So that's limited to the size of your page.
http://webwawes.dk/Tiffany/index.html
Автор
great , Thank you !!
Автор
So that's limited to the size of your page , you mean?
The Width of the page is set by Website X5 - This I have not found a way to overwrite.
Автор
Hi Henrik , Do you have email or skype , i will send script for you
can help me check ? thanks!
Tiffany
Hello Tiffany
Add *** on skype.
Henrik
master @ webwawes.dk