Solved

stretchy quote container - RESUBMITTED QUESTION

Posted on 2013-06-11
9
443 Views
Last Modified: 2013-06-12
Original question posted is below in quotes.  MIcky159 issued a solution which was accepted and now I am having problems with his solution.  I will post his solution after this poste

My Question

"How do I set up a quote background image so that it stretches with the size of the quote?  I thought of putting all pieces (top, middle and bottom) into a containing div but is seems like that isn't a very good solution.  I need the point to be to the right of the name.

Here is screen shot of how it would look in website
http://screencast.com/t/lGkaWkPyyk

I have attached the top and bottom edges along with the final point."
quote-point.png
quote-top.png
quote-bottom.png
0
Comment
Question by:nsitedesigns
[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
  • 5
  • 3
9 Comments
 

Author Comment

by:nsitedesigns
ID: 39238846
Mickey159's awarded answer:


This is my updated working demo:

http://jsbin.com/utudaj/4/

If you want to use it on your server, please change the image path to your local path.
If you want to remove the green border(I don't know whether you want that so I included), search and delete the following line:
0
 

Author Comment

by:nsitedesigns
ID: 39238855
This is the problem:

I noticed that I am getting this funky "Edit in JS Bin" icon appear in the upper right of the site (outside to boundaries of the website) in the background area.  I believe I need to make some adjustment to the code you provided.  Can you please let me know what I need to do.  I attached a screen shot so you can see what I am talking about.

Link
http://nsitedesigns.com/nsitedesigns/darkhorse/index.html

Coboldinasauer pointed out that the box is coming from this script down near the bottom of the page:
<script src="http://static.jsbin.com/js/render/edit.js"></script>

He also pointed out the line of code in the scrip that generates the elemtent
el.innerHTML = '<div><a class="jsbin-edit" href="' + href + 'edit"><b>Edit in JS Bin</b> <img src="' + options.root + '/images/favicon.png" width="16" height="16"></a></div>';

Problem
When I open any dw file and try to edit the edit.js file it says that it is a remote file and cannot be edited.  When I look on the server, there is no edit.js file, there IS a file called edit4048fd.....js.  When I open that file, it looks like the edit.js file.  So I opened it, removed the line of code, renamed it edit.js and uploaded it.  I deleted the cache, reset the browser and I still see the darn JS Bin in the right top corner.  Any other ideas?
Screen-shot-2013-06-10-at-8.56.3.png
0
 
LVL 58

Expert Comment

by:Gary
ID: 39238888
Don't know about all those suggestions but I would do it like this.
http://jsfiddle.net/sdNCg/1/
0
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 

Author Comment

by:nsitedesigns
ID: 39238958
GaryC123

1.  How to you reference the bottom and top rounded edges?  Those images are not refernenced in your code.

2. I thought you are not supposed to put a margin on a float in the same direction as the float.

3.  don't i need to define the outer div or can I just call it a div?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39238987
1. Not using images (will not work in <IE8 but degrades ok) except for your bottom speech arrow. But you could even do this in css if you can rely on your users having the latest browser.
But you can use http://css3pie.com which will apply the rounded corners in all versions of IE
2. Put any margin you like
3. Didn't define any container as I don't know how you fit it into your code, just add your own class name as you need.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39239013
Check out using QTip http://craigsworks.com/projects/qtip/  this is something I use in some of my projects and really like it.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39239019
Don't think he wants an hover event padas, this is an on page element.
0
 

Author Comment

by:nsitedesigns
ID: 39239061
Padas,

Very cool but I don't want someone to have to click to view testimonial.  It should be visible at all times on the site.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39241704
worked perfectly in lower ie versions.  easy to implement!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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)

690 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