Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2014-10-17
10
Medium Priority
?
91 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

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 …
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 …
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)
Suggested Courses
Course of the Month11 days, 19 hours left to enroll

564 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