Currently, I am engaged in creating a simple meme generator using jQuery to enhance my skills. However, I have encountered a small issue along the way.
Here is the basic setup that I have implemented so far:
1.) There are three sample images available for selection, clicking on which will display them inside the "meme" div at the top of the page. 2.) Users can input text in the two forms provided for adding top and bottom text.
While everything seems to be working fine functionality-wise, I suspect that the problem lies more on the CSS side. As a novice in jQuery, I could use some guidance in resolving this issue.
The specific concern I have pertains to the text entered by the user which tends to overflow and extend beyond the boundaries of the col-sm-6 container where the meme image and text are placed.
Although I managed to prevent overflowing by setting 'overflow: hidden' in the CSS for each text section, the text still spans the full width of the col-sm-6 container, which is larger than the actual image size.
My primary objective is to ensure that the text wraps around the borders of the image rather than exceeding the dimensions of the outer col-sm-6 container. While I understand that Bootstrap columns may not work in this scenario, the meme generator in the results window demonstrates this behavior with overflowing text outside the image boundaries.
$(document).ready(function() {
$('#meme-controls').on('keyup','#top-text-input', function() {
$('#top-text').text($(this).val());
});
$('#meme-controls').on('keyup','#btm-text-input', function() {
$('#btm-text').text($(this).val());
});
$('#meme-samples').on('click','img', function() {
$('#meme').empty().append($(this).data('src'));
});
});#meme {
position: relative;
}
#meme-samples {
cursor: pointer;
}
#top-text {
top: 10px;
margin: 0 auto;
right: 0;
left: 0;
color: red;
position: absolute;
overflow: hidden;
}
#btm-text {
bottom: 10px;;
margin: 0 auto;
right: 0;
left: 0;
color: red;
position: absolute;
overflow: hidden;
}<!-- MEME Display -->
<div class="container">
<div class="row text-center">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div id="meme"></div>
<h2 id="top-text"></h2>
<h2 id="btm-text"></h2>
</div>
<div class="col-sm-3"></div>
</div>
</div>
<!-- MEME Controls -->
<div id="meme-controls" class="container">
<div class="row text-center">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<input type="text" id="top-text-input" class="form-control" placeholder="Top Text Goes Here."><br>
<input type="text" id="btm-text-input" class="form-control" placeholder="Bottom Text Goes Here."><br>
<div class="col-sm-3"></div>
</div>
</div>
<!-- MEME Sample Photos-->
<div id="meme-samples" class="container">
<div class="row text-center">
<div class="col-sm-4">
<img src="https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/willy_wonka_sarcasm_meme.jpg'>">
</div>
<div class="col-sm-4">
<img src="https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg" data-src="<img src='https://makeameme.org/media/templates/250/game_of_thrones_meme.jpg'>">
</div>
<div class="col-sm-4">
<img src="https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg" data-src="<img src='https://makeameme.org/media/templates/250/the_most_interesting_man_in_the_world.jpg'>">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Any assistance or advice you can provide would be greatly appreciated!