stretchy quote container

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&

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.

coboldinasaur,

I would prefer a solution that works is a majority of browsers, not just modern ones.  Thanks anyways.

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

cobol,

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

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&

@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.

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?

Here is working file.
index.html

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&

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

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&

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.

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&

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

oops - added this to the wrong question, please disregard.

Been there; done that.  I sometimes have a dozen tabs open to questions I am working on.


Cd&

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

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&

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>

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

Select allOpen in new window

Try removing just the one line.

Cd&

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

Select allOpen 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&

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?

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

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&

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>

Select allOpen in new window

This should fix it.
Good luck!

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 =)