i have a home page whereby i have an image serving a profile picture and in my view for a shop i want to be able to click the unlock button and the image should replace the current image with the new one using javascript,here is what i have done so far;
home view
<div class="row">
<div class="col-md-6 mb-5 "style="border:4px solid black; padding-right: 100px;">
<img class ="img-fluid" src="<?php echo base_url().'assets/images/'.$img; ?>" width="250" height="auto">
shop view
<form id="1">
</div>
<div>
<div class="col-4 col-sm-6 wow fadeInUp" data-wow-delay="0.4s">
<div class="service-thumb bg-grey">
<i class="fa fa-camera"></i>
<figure> <img class ="img-circle" src="<?=base_url();?>/assets/images/hero1.png" width="250" height="150"><figcaption><h4><font color="black">This fearless warrior relies on his bulging muscles to wreck havoc on yor enemies, can be unlocked by achieving 5000 points</font></h4></figcaption></figure><input class="btn btn-success" type="submit" onclick="signupimg('hero1p.png');" id="btn1" value="unlock">
</div>
</div><br><p>
</form>
<script type="text/javascript">
function signupimg(y){
document.getElementById("signupimage").value = y;
document.getElementById("signupimage2").value = y;
}
</script>
controller
public function shop()
{
$this->load->library('session');
$user_id = $this->session->userdata('user_id');
$this->load->view('shop');
}
To change the profile image, you need to add functionality to click event on the other image, then you'd want to check if the user has accumulated 5000 points or not(either through session or DB), if yes then change the src of the profile pic.
I've created a working snippet, comments are mentioned wherever deemed necessary. See if it helps you.
document.querySelector('#unlock_pic').addEventListener('click', (event) => { // add click event to other pic
// console.log(event.target.src)
// before changing the image, check the condition, if the user has 5000 points, if yes, save it in database, then do this ↓↓
document.querySelector('#profile_pic').src = event.target.src; // change the profile pic src
});
img {
height: 150px;
width: 150px;
}
<img src="https://www.mightyplace.com/Images/Common/profile.jpg" id="profile_pic"/><!-- Your profile pic -->
<img src="https://pbs.twimg.com/profile_images/770394499/female_400x400.png" id="unlock_pic"/><!-- Your other pic-->
Related
I am making a plugin for social discount. When user click on Facebook and Instagram follow link then it display a coupon box.
The div display only when user click on both the links. I am not good in java-script so please help me.
<div class="popup">
<div class="social-links">
<h3>Like + Follow = Get Rs 50 Discount</h3>
<img src="images/facebook-logo.png" alt="" />Facebook
<img src="images/facebook-logo.png" alt="" />Instagram
</div>
<div class="coupon">
<p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>
</div>
So I want user click on Facebook link and Like Page and then back to website and click on Instagram link and follow the Page. and then he back to website the coupon div display.
Regards
Here is one way of doing it (using css):
var instagramClicked = false;
var facebookClicked = false;
document.getElementById('instagram').addEventListener('click', () => {
this.instagramClicked = true;
this.showCoupon();
});
document.getElementById('facebook').addEventListener('click', () => {
this.facebookClicked = true;
this.showCoupon();
});
function showCoupon() {
if (this.instagramClicked && this.facebookClicked) {
setTimeout(() => document.getElementById('coupon').style = 'display: block', 1000);
}
}
<div class="popup">
<div class="social-links">
<h3>Like + Follow = Get Rs 50 Discount</h3>
<img src="images/facebook-logo.png" alt="" />Facebook
<img src="images/facebook-logo.png" alt="" />Instagram
</div>
<div class="coupon" style="display: none;" id="coupon">
<p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>
</div>
add id attributes for links and style attribute, what hide your coupon block like this
<div class="popup">
<div class="social-links">
<h3>Like + Follow = Get Rs 50 Discount</h3>
<img src="images/facebook-logo.png" alt="" />Facebook
<img src="images/facebook-logo.png" alt="" />Instagram
</div>
<div class="coupon" style="display: none;">
<p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>
Then add below, variables what keep state (clicked or not) links, click handlers, and function what check is clicked variables like this.
<script>
var facebookClicked = false;
var instagramClicked = false;
document.querySelector("#facebook-link").addEventListener("click", function (e) {
facebookClicked = true;
showCoupon();
});
document.querySelector("#instagram-link").addEventListener("click", function (e) {
instagramClicked = true;
showCoupon();
});
function showCoupon() {
if (facebookClicked && instagramClicked) {
document.querySelector(".coupon").removeAttribute("style");
}
}
</script>
I have a disabled button that I want to enable by clicking another button and keep it permanently enabled. That button has an image and at the same time as the button gets enabled the image src should change. This is my code:
<!--This is the button that enables the img_tema2 button-->
<a id="a_tema1" href="principal.html" class="btn btn-success">Enviar</a>
<!--This is the img_tema2 button-->
<div class="col-lg-4">
<button class="tsbutton" onclick="window.location='tema_2.html';" id="img_tema2">
Tema 2
<img id="gif_tema2" class="img-circle2" src="../assets/img/segundo_tema_gris.gif" alt="Generic placeholder image" width="140" height="140">
</button>
</div>
$("#img_tema2").prop("disabled", true);
$(function () {
var showLittleHeader = localStorage.getItem('#img_tema2');
if (showLittleHeader) {
$("#img_tema2").prop("disabled", false);
}
$('#a_tema1').on('click', function () {
localStorage.setItem('#img_tema2', 1);
$("#img_tema2").prop("disabled", false);
});
});
Sorry, I totally forgot to explain a lot of things.
The a_tema1 its on a different HTML.
When I open my html the button img_tema2 is not disabled, and as I said up, I need it to be first disabled and when I click the a_tema1, it gets enabled.
Adding the line $("#img_tema2 img").attr("src", ''); that was recommended, it doesn´t do anything neither.
What could I be doing wrong?
Sorry for my bad english an thanks for all the help you can give me
Not sure exactly what you are trying to do, but this is my interpretation:
https://jsfiddle.net/tzf8c50k/
HTML:
<!--This is the button that enables the img_tema2 button-->
<div id="a_tema1" class="btn btn-success">Enviar</div>
<br/><br/>
<!--This is the img_tema2 button-->
<div class="col-lg-4">
<button class="btn" onclick="window.location='tema_2.html';" id="img_tema2">
Tema 2
<img id="gif_tema2" class="img-circle2" src="https://i.imgur.com/fBE8b1k.png" alt="Generic placeholder image" width="140" height="140">
</button>
</div>
<br/><br/><br/><br/>
<p>Icons made by Freepik from www.flaticon.com is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
target="_blank">CC 3.0 BY</a></p>
JS:
$("#img_tema2").attr("disabled", "disabled");
$(function() {
var showLittleHeader = localStorage.getItem('#img_tema2');
if (showLittleHeader) {
$("#img_tema2").removeAttr("disabled");
$("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
}
$('#a_tema1').on('click', function() {
localStorage.setItem("#img_tema2", 1);
$("#gif_tema2").attr("src", "http://i.imgur.com/fNerL36.png");
$("#img_tema2").removeAttr("disabled");
});
});
I have a booking system where a user will land on the booking page and prompted for a date/time selection. When they click the button I want my landing page image (contained in a div) to be hidden and the available seats (also in a div) to appear in the same place. I found some code on this thread How to hide one div and show another div using button onclick?. But what happens is that the image never appears from the start the screen is just blank, the second div however does appear so it's just the first div I'm having the problem with. Code is below, any help would be great.
JS:
function switchVisible() {
if (document.getElementById('seatspic').style.display == 'none') {
document.getElementById('seatspic').style.display = 'block';
document.getElementById('seats').style.display = 'none';
} else {
document.getElementById('seatspic').style.display = 'none';
document.getElementById('seats').style.display = 'block';
}
}
HTML:
<div id="seats" style="display: none;">
<?php echo $chart; ?>
</div>
<div id="seatspic">
<img style="display: block;" src="img/UCCBooking.jpg">
</div>
<a class="btn btn-primary btn-lg" onClick="switchVisible()">Check Availability</a>
Basic idea on how to use a class to toggle two elements.
function switchVisible() {
document.getElementById("wrapper").classList.toggle("open");
}
#wrapper #seats,
#wrapper.open #seatspic{
display : block;
}
#wrapper.open #seats,
#wrapper #seatspic {
display : none;
}
<div id="wrapper">
<div id="seats">
Seats
</div>
<div id="seatspic">
Pic
</div>
</div>
<a class="btn btn-primary btn-lg" onClick="switchVisible()" href="#">Check Availability</a>
I am using the following bootstrap 3 html
<form action="#" role="form">
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logothumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo"
> </span>
Remove
</div>
</div>
</div>
<div class="margin-top-10">
Upload
Cancel
</div>
</form>
I have some javascript code to upload the file and also show an existing file from database when the code is first loaded.
var fileUploadControl = $("#logo")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0];
The problem is, the file upload control shows 'Select Image' even when there is
a file present i.e. shown from database in the img src. It should show the 'Change' - 'Remove' options. How do i get it to do that. It does this when a file is selected for the very first time however.
Thanks
If I understand you correctly, you will have an image present when your page is loaded. However, you only want "Change" and "Remove" visible, with "Select Image" hidden. To do this, you can simply hide your span containing "Select Image" when the page loads.
$('span.fileinput-new').hide();
Now you have your active page. If the default image is removed, I assume you want to then hide "Change" and "Remove" and then display "Select Image" again. In this case, you can set an event on your file input and toggle these based on if a file is currently uploaded or not.
$('#logo').on('change', function() {
// If a file is uploaded - hide "Select Image" and show "Change - Remove"
if($(this).val().length) {
$('span.fileinput-new').hide();
$('span.fileinput-exists, a.fileinput-exists').show();
// If a file is not uploaded - show "Select Image" and hide "Change - Remove"
} else {
$('span.fileinput-new').show();
$('span.fileinput-exists, a.fileinput-exists').hide();
}
});
EDIT - I played with this a while and have put together a JSFiddle that I think will help you out.
Check it out here
Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of "block". What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn't seem to help as all.
This is my markup:
What is ElectedFace?
<div class="flip_content" id="flip1">
<div class="content-info">
<h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
<p>electedface is America's free social network delivering more real time news, faster than any other website.</p>
<p>electedface connects subscribers to their elected officials with active electedface accounts</p>
<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
<h4>Getting Started</h4>
</div>
</a>
<div class="flip_content" id="flip2">
<div class="content-info">
<p> There are three ways to connect:</p>
<p>Read top news stories and Read local news stories</p>
<p>Connect to your elected officials and start a group in your community</p>
<p>Register for free membership</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
<h4>Next Steps</h4>
</div>
</a>
<div class="flip_content" id="flip3">
<div class="content-info">
<p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
</div>
</div>
Heres my Javascript
<script type="text/javascript">
$(function(){
$('.flip_switch').bind("click",function(){
var element = $(this);
var content = element.data("content_container");
var flip_container = element.data("flip_container");
var active_flipbox = $('.activeFlip');
if(element.hasClass('activeFlip')){
//If the flipbox is already flipped
flip_container.revertFlip();
}
else{
if(active_flipbox){
//Revert active flipbox
active_flipbox.revertFlip();
//Remove active status
active_flipbox.removeClass('activeFlip');
}
$(flip_container).flip({
direction: 'rl',
color: '#c8cbce',
content: $(content).html(),
speed:100,
onBefore: function(){
$(flip_container).addClass('activeFlip');
}
});
}
return false;
});
});
</script>
It seems to me your problem is so called bubbling
What you need is (most likely :) :
http://api.jquery.com/event.stopPropagation/