Solved

stretchy quote container

Posted on 2013-05-22
28
291 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 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

11 Experts available now in Live!

Get 1:1 Help Now