Solved

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

Posted on 2014-10-17
10
77 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
listing all functions in JavaScript 19 105
jQuery aJax Disable Async 24 43
onOpen 14 41
Cordova Camera plugin fails 2 21
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 …
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 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)

757 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

22 Experts available now in Live!

Get 1:1 Help Now