Solved

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

Posted on 2014-10-17
10
83 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
selected value 16 23
Jquery if else not working ... WHY? 5 23
javascript form - error when hitting enter 3 26
Validating number not work with decimal 4 23
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 …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

680 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