Client-side

singh336 - loading css and js files more efficient

Cmt, 01 Şub 2014 06:47:05 -0000

has anyone tried this? how to implent this?

Twiebie - Retrieve favicon from other sites

Cum, 06 Tem 2012 16:42:45 -0000

Use img tags in the source :)

Trustmaster - Retrieve favicon from other sites

Cum, 06 Tem 2012 16:07:35 -0000

Well, to cheer you up a bit: there is no button to paste an image in this toolbar, sorry :D It is present in full set used to add/edit pages only.

That means we need to add one.

Kingsley - Retrieve favicon from other sites

Cum, 06 Tem 2012 16:05:57 -0000

I feel so stupid right now..

pieter - Retrieve favicon from other sites

Cum, 06 Tem 2012 15:00:49 -0000

Normally it is like
eg.

http://www.cotonti.com/favicon.ico
http://www.facebook.com/favicon.ico

Kingsley - Retrieve favicon from other sites

Cum, 06 Tem 2012 14:42:07 -0000

So I want to do something on my site, with which I totally have no clue how to do it :)

I've created a links section, and want to retrieve favicons from the sites added to the links section, so I can display the favicon in front of the site name

http://www.cotonti.com/datas/users/twitexample_133.png

Does any one feel like showing me how to achieve that so the links section will retrieve the favicon automatically? Thank you

P.s. how the hell do you add images in this editor? cant find it.. mimimi..

urlkiller - Cotonti UI elements

Sal, 07 Şub 2012 16:34:23 -0000

sorry i didnt wanted to only nag. i like these set very much. its a good piece of work...
good job!

GHengeveld - Cotonti UI elements

Sal, 07 Şub 2012 08:11:51 -0000

Ok, all icons use data-uris now. No more sprites.

urlkiller - Cotonti UI elements

Pzt, 06 Şub 2012 15:54:22 -0000

as for the icons i just had that link. the same icons are existing as regular images that you could use.

i've had a quite extensive research on the base64 stuff for a couple of weeks for a client.
from my point i can confirm that base64 encoded data uri's are fully supported starting IE7...

well, if you want to know, you even could double encode the contents in all modern versions and browsers.

besides that... do they rounded corners and gradients and all other fancy stuff work in ie6 anyway? no...

Added 3 minutes later:

also the icons in buttons seem a bit missaligned. maybe you can dead center them?

Added 49 seconds later:

also maybe add different cursors to disabled elements

Added 1 minute later:

maybe add flat tooltips. the user maybe gets confused with the button-looking tooltips you have now.

GHengeveld - Cotonti UI elements

Pzt, 06 Şub 2012 14:51:28 -0000

Yes, I intend to add state styles, as used by cot_error().

Data-URIs for images aren't supported in all browsers. I've opted to implement something that works cross-browser first. The same goes for @font-face. Actually the best solution would be to use inline (base64) SVGs, but that's not supported at all. @font-face is problematic in terms of accessibility because screen readers don't know a character is actually an icon (image).

Update: I did some research into data-uris and found an interesting article on the topic. It seems it's possible to get data-uris working in most browsers, including IE6 and 7.

I recently added some more interface elements: http://dev.ghengeveld.nl/css3/buttons/

urlkiller - Cotonti UI elements

Pzt, 06 Şub 2012 08:59:09 -0000

did you thought about giving it styling for errors in form fields ?
would be nice to see some red error warnings in there... or do i missed them somewhere?

bootstrap offers an error, alert, success and primary class to add to you elements to make it red, orange, green or blue

Added 1 minute later:

also if using theme.css files you could think about embeding the sprites with base64 encode into the css files.

Added 2 minutes later:

also for icons: http://www.fontsquirrel.com/fonts/iconic
well thats a font-face font but there where some of these icons as images out there.

Kingsley - Cotonti UI elements

Cum, 13 Oca 2012 12:23:19 -0000

Yes yes, cool new stuff. xD

elfrenazo - Cotonti UI elements

Per, 12 Oca 2012 23:32:07 -0000

do not quite understand, as used??

Fox - Cotonti UI elements

Per, 12 Oca 2012 22:21:02 -0000

very cool

GHengeveld - Cotonti UI elements

Per, 12 Oca 2012 20:20:22 -0000

Thanks guys. It's a work in progress, I just added tooltips. I'm trying to make it flexible so you can re-use class names between elements, for example the colors are used by both the buttons and the tooltips.

The icons are indeed a sprite (4 images: white, black, 2 sizes)

Twiebie - Cotonti UI elements

Per, 12 Oca 2012 19:42:11 -0000

Good stuff, Gert!

Eugene - Cotonti UI elements

Per, 12 Oca 2012 19:23:46 -0000

I'm sorry, I maybe missed the picture for icons (I mean downloads - i think it's a sprite)...

But what I saw on preview is really cool! It will give styles for default and make things easier!

do continue with forms...

lukgoh - Cotonti UI elements

Per, 12 Oca 2012 18:11:40 -0000

Awesome stuff. The icons are a great idea. This is exactly what Cotonti needed!

GHengeveld - Cotonti UI elements

Per, 12 Oca 2012 17:40:12 -0000

Hi people,

Recently I've been working on a new base theme for Siena. The goal is to provide a very basic HTML5 template, with enough flexibility to easily change the layout and add new elements. I also want to make it very easy to build good looking user interfaces, by providing a set of CSS3 interface element stylesheets. I've started with buttons and icons, and I intend to extend this to include other common interface elements such as form fields, dialogs and tooltips.

The buttons are more or less done now. Included features:

13 colors
3 sizes
5 styles
Horizontal and vertical grouping
15 icons (more to be added)

You can have a look and download the CSS here.

Let me know what you think and any suggestions you may have.

ez - loading css and js files more efficient

Sal, 08 Kas 2011 18:03:27 -0000

I have developed a jquery plugin to load resources like js and css files when you need them.
You can really make a difference in speed and its ez to use when using this stuff.

http://code.google.com/p/rloader/

You need some front-end JS knowledge to fully understand its potential.... have fun

And yes... you can ask me questions

GHengeveld - Jquery and Smarty

Pzt, 28 Şub 2011 05:20:18 -0000

You can combine the 4 javascript blocks into a single block:

Even better with document.ready check:

sosnix - Jquery and Smarty

Cum, 25 Şub 2011 08:08:12 -0000

Hi,
I have problem with working jquery script. jCube script, so I can see image but they are no working well, they are doesnt work.

In HTML file the script is working very well!

Everythink is working fine only script doesnt work!~Why?
Please help me!

TPL file from cms Cotonti. header.tpl
http://pastebin.com/dfxt13dB
and
perfect working html file!
http://pastebin.com/bTF54LP1

Added 3 minutes later:

ok topic going to trash.
Path to js files was wrong.

Twiebie - Form example

Per, 25 Kas 2010 06:55:34 -0000

I think the plugin isn't loaded properly as you suggested.
My knowledge of Javascript and jQuery is pretty basic, and I might be overlooking a few things.

The CSS looks good though.

ez - Form example

Çrş, 24 Kas 2010 23:46:26 -0000

Tweebie,

You have probably seen this: http://mucur.name/system/jquery_example/

Is the Jquery plugin properly loaded ?
And is the css allright ?

Twiebie - Form example

Çrş, 24 Kas 2010 23:04:05 -0000

Could someone give a little help with putting in 'examples' in form fields?

I've tried the following as a test but it's not working:

HTML:

Javascript:

$('#exampleclass').example(function() {
return $(this).attr('title');
}, {className: 'not_example'});

ez - help please

Pzt, 22 Kas 2010 21:44:53 -0000

you are welcome...

Kingsley - help please

Pzt, 22 Kas 2010 21:28:56 -0000

Man, I lave you...

It works wouldn't have found that on my own.. Although now I learned something new :p

ez - help please

Pzt, 22 Kas 2010 14:35:59 -0000

AHHHH maybe my mistake... (i think i see it now)


            Contact Us
            F.A.Q
            Recruitement
            =XE= Ranks

this span is also triggered by your code... so it appends a span, but there was already one there !

Try this my friend:


$(document).ready(function(){

	$("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span.dropdownclicker").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});
});

You need to change some css to:

ul.topnav li span.dropdownclicker { /*--Drop down trigger styles--*/
	width: 13px;
	height: 35px;
	float: left;
	background: url(img/subnav_btn.gif) no-repeat center top;

This is just a quick answer, but I think you see what I mean.. and have pointed you in the good direction

greetings,

ez

Added 9 minutes later:

Maybe it could even be simpler....

leave your JS code like it was..
just remove the 'extra' span from the HTML..

Kingsley - help please

Pzt, 22 Kas 2010 08:58:23 -0000

only get one popup screen..

GHengeveld - help please

Pzt, 22 Kas 2010 06:44:41 -0000

If you add an

alert("triggered...");

in the place where the arrow is placed, you can check if it's fired twice. You will get 2 alert popups in that case. Placing an alert is a common way to help debug JS code.

Kingsley - help please

Pzt, 22 Kas 2010 05:45:19 -0000

huh, add an alert? what do you mean..

ez - help please

Pzt, 22 Kas 2010 01:39:46 -0000

Looks almost like the onready function gets fired twice ????
add an alert to see if so.

Kingsley - help please

Pzt, 22 Kas 2010 01:24:49 -0000

http://www.x-ecutionerz.com/newsite/index.php

I've made this new skin with, which has one error that is quite persistent, in ofcourse, IE.

In opera, ff en chrome it works like a charm, but IE displays the dropbox arrow twice.. :S
I've been through the code dozens of time, and now I think I just don't see it anymore.

$(document).ready(function(){

	$("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

	$("ul.topnav li span").click(function() { //When trigger is clicked...

		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
	});

});

ul.topnav {
	list-style: none;
	padding: 0 20px;
	margin: 0;
	float: left;
	width: 1100px;
	background: #222;
	font-size: 12px;
	background: url(img/topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
    
}
ul.topnav li a{
	padding: 10px 5px;
	color: #bfbfbf;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(img/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 13px;
	height: 35px;
	float: left;
	background: url(img/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 0px solid #222222;   
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
    border: 1px solid #222222;   
}


html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(img/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(img/dropdown_linkbg.gif) no-repeat 10px center;


   
    Home
 | 
Forums

        Intelligence
        

            Contact Us
            F.A.Q
            Recruitement
            =XE= Ranks
        

Members
 | 
 
        Media
        

            Image Gallery
            Clan Gallery
            Art & images
        

    
        Video
        

            Clan Videos
            Game Trailer
            Movie Trailers
        

Links
 | 
Servers

        Roster
        

            Games
            Squads
            Matches
            Challenge Us
            Sign Up
        



        Stats
        

            Bad Company 2
            CoD: Black Ops
        

     | 
    Support Us

it probably is something very small and stupid, but I just don't see it anymore..

Kilandor - jQuery Uniform

Pzt, 01 Kas 2010 19:32:49 -0000

Seems kinda silly to make a plugin for that. It only saves the effort of editing the file if you want to change themes.

Kaan - jQuery Uniform

Cum, 29 Eki 2010 01:54:18 -0000

Added plugins models

..... add header.tpl {HEADER_FORM}
3 pieces of original own theme

uniform.header.php



    


';
$t->assign(array(
"HEADER_FORM" => $form
));

?>

uniform.setup.php

http://www.neocrome.net

[BEGIN_SED]
File=plugins/uniform/uniform.setup.php
Version=v1.0
Updated=2010
Type=Plugin
Author=Kaan
Description=JQuery Uniform Sexy forms 
[END_SED]

[BEGIN_SED_EXTPLUGIN]
Code=uniform
Name=Uniform Sexy forms v1.0
Description=JQuery Uniform Sexy forms 
Version=v1.0
Date=2010
Author=Kaan
Copyright=https://seditiocms.com - www.ntka.org [by Kaan]
Notes=
SQL=
Auth_guests=R
Lock_guests=W12345A
Auth_members=R
Lock_members=W12345A
[END_SED_EXTPLUGIN]

[BEGIN_SED_EXTPLUGIN_CONFIG]
theme=01:select:default,agent,aristo:default:Theme Select.
[END_SED_EXTPLUGIN_CONFIG]
==================== */
if (!defined('SED_CODE')) { die('Wrong URL.'); }
?>

Download plugins: http://www.cotonti.com/datas/users/uniform_180.rar

GHengeveld - jQuery Uniform

Per, 28 Eki 2010 18:02:48 -0000

I've implemented in in the new Cotonti.com website, looks very good. I did make a custom sprite for it because the default lacks contrast.

Twiebie - jQuery Uniform

Çrş, 27 Eki 2010 07:37:19 -0000

Thanks, looks nice

..dot.. - jQuery Uniform

Çrş, 27 Eki 2010 05:07:13 -0000

@Koradhil - That would be nice
@Kingsley - ty,

@Twiebie - you need to put the scripts below {HEADER_COMPOPUP}

{HEADER_COMPOPUP}

Twiebie - jQuery Uniform

Çrş, 27 Eki 2010 00:53:54 -0000

I followed all the steps in the readme.txt file, but for some reason the new checkboxes etc don't show up?

Kingsley - jQuery Uniform

Sal, 26 Eki 2010 18:50:52 -0000

this is real nice dot, will try this out!