Solved

Is it possible to have a triangular background on a slider to show getting larger?

Posted on 2014-10-17
10
81 Views
Last Modified: 2014-12-14
Using the Jquery UI slider, is it possible to have a background image on the slider that gradually gets taller?

So its essentially a triangle, with the point on the left and the flat end on the right?
0
Comment
Question by:Al4ddin2
  • 6
  • 4
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40387504
Pretty simple to do the triangle:
#triangle-left { 
    width: 0; 
    height: 0; 
    border-top: 
    50px solid transparent; border-
    right: 100px solid blue; 
    border-bottom: 50px solid transparent; 
                                }

Open in new window


There is no reason you can't do the size change with scripting.

Cd&
0
 

Author Comment

by:Al4ddin2
ID: 40391469
That doesn't seem to work at all...
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40392735
Without a link to the page I have no clue what you are doing and why the style is not working.  Code like what I posted is used alover the web, so if it not working on your page, the problem is on your page.

Cd&
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Al4ddin2
ID: 40394209
I need it to work with this http://jqueryui.com/slider/

and make it look like this...

example.jpg
Thank you
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40395419
Okay so what does not work.  The CSS does not produce the triangle, or your scripting is not able to correctly integrate and manipulate it?  As I already indicated, there is only limited suport I can do if the most important information about the page is not available because you won't post a link.

Cd&
0
 

Author Comment

by:Al4ddin2
ID: 40396541
Hi,

Sorry I do not have a live URL that I can post...
I have done a quick fiddler here to show you how it is displaying for me though.

http://jsfiddle.net/xpsawu4j/

Thank you for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40397983
I don't see any code to modify the size or position of the triangle or to even give it an initial position.  

It is not magic, the browser is not going to anything unless you script it.  As it stands you have a fragment of code that has no context and you are not doing anything but displaying the div. Dynamic effects require scripting to be dynamic.  Unless I can see the page there is not much I can do to help further, but the scripting should not be that difficult.  However without knowing how much jquery trash you have bloating the page it might be messy.

Cd&
0
 

Author Comment

by:Al4ddin2
ID: 40407923
I dont understand what the problem is here?
I need help scripting it, that is why I raised the issue in the first place. You asked me for code that I am using and I have provided the relevant snippet in a jsfiddle. You do not need to worry about what else is on the rest of the page, that is my problem.
If the help I receive on here can make that JS fiddle look right then I can take that, from what it has shown me, and apply it to my instance.

Are you able to amend the fiddle to look something like what I need?

Thanks
0
 

Accepted Solution

by:
Al4ddin2 earned 0 total points
ID: 40408135
Its ok, I have done it.
http://jsfiddle.net/xpsawu4j/1/

Thanks
0
 

Author Closing Comment

by:Al4ddin2
ID: 40498721
I managed to come up with the answer myself
0

Featured Post

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTTPS jquery doesn't work 9 62
jQuery delay animation 3 30
simple javascript form validation 2 20
Decoding Special HTML Characters using Javascript? 2 29
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

777 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