Solved

JQery color picker issues

Posted on 2013-11-26
13
753 Views
Last Modified: 2013-11-26
Hi guys,

So I have the colour picker working on my personal website...

http://www.deans-place.co.uk/colourpicker/

When I try to upload it onto my work system it will not work? The letter 'c' in this link is where it should sit. Its like a management system so I uploaded various files into various locations and obv there is the template code around it, but I cant figure out what is stopping it from working....

http://test.urban-outdoors.co.uk/shop/test.html

Cheers,
Dean
0
Comment
Question by:deanlee17
  • 7
  • 6
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39677819
Your colpick.js and the tabs js file are being redirected to /
So you probably have an error in your htaccess
0
 

Author Comment

by:deanlee17
ID: 39677910
tabs js file?

Sorry, how did you check for the above?

Thanks.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39677918
HttpFox for FF

<script src="js/jquery.tabSlideOut.v1.3.js"></script>
0
 

Author Comment

by:deanlee17
ID: 39677934
Ah this page isnt using that file.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39677966
Maybe so but it just points to a common problem - both js files reside in the same folder (/js) and both are being redirected to the root folder - ergo no such file exist there.
0
 

Author Comment

by:deanlee17
ID: 39678055
Ye good point. I have updated those. No change.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39678135
Bit weird, cannot see why its not initialising the plugin - I can do it manually in the page and get it to work.
Can you move the colpick script tag and the initialization script to just before the closing BODY tag - maybe there is a timing issue.
0
 

Author Comment

by:deanlee17
ID: 39678157
Just off home form work, will be looking at it this evening so I shall give that a try and report back.

Cheers.
0
 

Author Comment

by:deanlee17
ID: 39678172
Im assuming you are referring to the below:

$(function(){
  $('.color-box').colpick({
	colorScheme:'dark',
	layout:'rgbhex',
	color:'ff8800',
	onSubmit:function(hsb,hex,rgb,el) {
		$(el).css('background-color', '#'+hex);
		$(el).colpickHide();
	}
})
.css('background-color', '#ff8800');
});

Open in new window


<script src="http://www.ishop.co.uk/roots/1200/js/colpick.js" type="text/javascript"></script>

Open in new window


That are currently sitting in the header?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39678263
Yep, move them to before the closing body (with the script tag first)
0
 

Author Comment

by:deanlee17
ID: 39678965
That was a great idea, as you can now see, its almost perfect.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39679011
Looks good to me, what is it that is not perfect.
0
 

Author Comment

by:deanlee17
ID: 39679149
Oh nothing, I just to reduce the length of the div, which I did.

Cheers for the help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now