Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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
?
86 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

705 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