Solved

stretchy quote container

Posted on 2013-05-22
28
301 Views
Last Modified: 2013-06-12
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-bottom.png
quote-point.png
quote-top.png
0
Comment
Question by:nsitedesigns
  • 13
  • 10
  • 5
28 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39188473
Just use a single background image for the quote container.  set the background-size for the container to: background-size:contain that will dynamically resize the image to fit the dimensions of the container.  Supported in all modern browsers.

Cd&
0
 
LVL 6

Expert Comment

by:mickey159
ID: 39188494
I don't exactly know what you mean, but this is my implementation:

http://jsbin.com/utudaj/1/edit

Please give more details so I can better answer your question.
0
 

Author Comment

by:nsitedesigns
ID: 39188701
coboldinasaur,

I would prefer a solution that works is a majority of browsers, not just modern ones.  Thanks anyways.
0
Industry Leaders: 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!

 

Author Comment

by:nsitedesigns
ID: 39188712
mickey159,

Please view linke below which shows the final look that I am trying to get.  The top of the box and bottom have rounded edges.  The very bottom has a point.

http://screencast.com/t/lGkaWkPyyk
0
 

Author Comment

by:nsitedesigns
ID: 39188744
cobol,

I do like your solution.  How new do the modern browsers have to be?  Does it go down to IE 7?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39188936
IE9+, FF 19+, Chrome 25+, Safari 5.1+, Opera 12.1+, IOS Safari 4+, Android 2.2+, Blackbery 7+ for the advanced background-image properties.

If you have to support IE < 9 then you are limited to very old technology plus hacks and you end up having to write code more than once.

The only concession I make to old versions of IE is to use the shim that defines new HTML5 tags for them.  On pages where they cannot render correctly, I don't even present the code, I just inform the user they need a modern browser and give them a link to the latest version of Firefox.

Cd&
0
 
LVL 6

Accepted Solution

by:
mickey159 earned 500 total points
ID: 39189710
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:

border:3px solid #00f900;

Open in new window

0
 
LVL 6

Expert Comment

by:mickey159
ID: 39189730
@COBOLdinosaur,

I am sorry to say that but I think that your solution is not working after some experiments. The background will not completely cover the whole quote but instead maintain its proportion. If it stretches proportionally, it does work. I hope you can have more great solutions.

@nsitedesigns,

Are you going to stretch the quote thing horizontally? I have replicated the quote thing and you don't seem satisfied. Please tell me how can it be improved to suit your requirement.
0
 

Author Comment

by:nsitedesigns
ID: 39190939
Mickey159.

The quote will stretch vertically to fit various quote lengths.  

1.  The point at the bottom of the quote box in dw is on  the left yet when I upload it, it is on the right?  
2.  When I put in your code it messes up my page.  The footer moves to below the sidebar 2 (where quote is), and the content area which has copy and should be white turns black
3.  Plus, my content margin is no longer flush with the sides, it is too narrow.
4.   How do I add the person's name to the left of the quote?
0
 

Author Comment

by:nsitedesigns
ID: 39190941
Here is working file.
index.html
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39191700
You can try using cover instead of contain.  But from what I can see of the code it probably has other issues anyway.  There are just bits and pieces bouncing around.  Trying to do special effects and styling should be left until after the structure has been build.

It is like building a house; you don't want to start putting up the wallpaper before you put on the roof, windows and doors.  CSS is dependent on the HTML structure and you need that solidly in place for the whole pages before you start doing details of styling.

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39192081
The page was done except for the quote part.  Here is a link to the "before quote" page:
http://nsitedesigns.com/nsitedesigns/darkhorse/index_good.html
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39192296
You have on structural error that might be making things difficult for you.  The div "wrapper" does not appear to have a closing </div>

Now that I see the page, think I have a better understanding of the problem, but not a solution.  Getting an image to respond to the amount of text in the container is very unlikely. Having to support older browsers makes it just about a non-starter.

You might have to settle for the background being fixed in a container, and the text in a smaller container with a transparent background and overflow:scroll.

BTW when you indicated, that it didn't work, you were using a browser right? Because it will display correctly in dreamweaver of other tool.  You need to do it in a real browser.

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39192554
I checked the code on the page and ran a validator.  There were no errors on the index_good.html page.  I will try it again.

Yes, I did test the page in a browser, not just preview using dw.  

I cannot add elements to a design that won't work in a majority of browsers. While it is cool, it is still not a good idea for me to do.  I thought there might be a way to create a div and then plunk the text in the div with an image at the top and bottom of the div.  Guess that won't work either.  Will have to play around with it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39192603
Actually the latest browsers support multiple images that can be individually poisition. Chrome, Firefox and many other browsers have support them for years, but with IE there is no support prior to IE9.

http://caniuse.com/multibackgrounds


Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39192617
Here is a screen shot of two files.  The red notation is next to animation.html, created on May 17 (date is obscured). I cannot dbl click to open

The green notation is next to contact.html, created on May 10.  I CAN dble click to open

http://screencast.com/t/r3mF1d3EA
0
 

Author Comment

by:nsitedesigns
ID: 39192622
oops - added this to the wrong question, please disregard.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39192632
Been there; done that.  I sometimes have a dozen tabs open to questions I am working on.


Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39234835
Micky159,

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
Screen-shot-2013-06-10-at-8.56.3.png
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39235480
It is coming from this script down near the bottom of the page:
<script src="http://static.jsbin.com/js/render/edit.js"></script>


Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39235617
yup - I realize that.  The problem is when i pull the script (from Mickey) the gray box on the right doesn't work.

<script src="http://static.jsbin.com/js/render/edit.js"></script>
    <script>jsbinShowEdit({"root":"http://static.jsbin.com","csrf":"LN7qzo5unOd3rdBjS41RVxX1"});</script>
    <script src="http://static.jsbin.com/js/vendor/eventsource.js"></script>
    <script src="http://static.jsbin.com/js/spike.js"></script>
    <script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1656750-34']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
    </script>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39236317
This is the line of code in the script that generates the element:

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>';

Open in new window


Try removing just the one line.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39236321
If that does not work you could just hide it with:
el.innerHTML = '<div style="display:none;"><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>';

Open in new window


A hack; but it is really just a hack of a hack anyway.

The validator is saying the wrapper div is not closed, so ther must be an open div somewhere.

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39238773
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?
0
 

Author Comment

by:nsitedesigns
ID: 39238862
Cobol,

I created a new question with all this history and hope that someone can figure out a solution.  In the meantime, I wish I could award you points too for all your efforts.   The "new" question is called stretchy quote container - RESUBMITTED QUESTION.  Feel free to chime in so I can give you points.  Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39238887
It appears that you have no control over the code.  Somewhere in the rat's nest of scripting there is a persistent bit of almost virus-like code.  I have no idea where it is, what it is for, or how it is getting there.

I use this very simple approach of coding with a text editor, and never using anything off the shelf, so I am at a loss to guess what is going on.

Is shows styling from edit.css which is not part of the source; but rather gets link from some obtuse scripting.  I cannot think of any sane reason that a link to an external stylesheet would be generated with client side scripting instead of just including it server side.

I'm not sure how badly the Document Object is damaged.  This kind of client side generation is always a problem, and takes hours and days; sometimes even weeks, to find and fix problems that should take 5 minutes.

About the only thing I can think of at this moment is find the edit.css file and change it to make that unwanted button have display:none. Once you are done with it, you might want to look at exploring different tools for development, because clearly what you have is burning your time.

Cd&
0
 
LVL 6

Expert Comment

by:mickey159
ID: 39241090
Sorry for the late response. I am completely offline for 1 week or more.

For the jsbin button problem, try removing these lines in your file:
<script src="http://static.jsbin.com/js/render/edit.js"></script>
<script src="http://static.jsbin.com/js/vendor/eventsource.js"></script>
<script src="http://static.jsbin.com/js/spike.js"></script>

Open in new window


This should fix it.
Good luck!
0
 
LVL 6

Expert Comment

by:mickey159
ID: 39241103
Explanation for this:

Actually it is going too far to go to edit the edit.js. This is because that file is even not in your server. You cannot edit something that is in others' server, just like you cannot go to your neighbours and move their things. I somehow figured that the root of the problem lies in those lines. If the above cannot solve that, please tell me where do you copy the code from.

PS: If you don't mind, I like to have some more points =)
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap list items overlap 3 37
WordPress 8 55
Can't get js code to execute 8 32
How to get chosen background-color on every line? 10 21
This article discusses four methods for overlaying images in a container on a web page
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 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