images not displaying through jquery - javascript

ok here is the full code
chenging the background image css property through jquery and the images are not displaying .... checked the paths and they are ok
divs exist, css is ok , paths are ok, images exist BUT it works on the on.show function and it does not work on the click function
// when new category show default images
$('#newCategory').on('show.bs.modal', function () {
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/default.png';
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/default.png';
$( '#categoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#bannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
});
// load category info before display dialog
$('body').on('click', '.btn-upd-id',function(){
var id = $(this).attr('upd-id');
$("#update-category-id").val(id);
if( id != "" ){
$.post('category/category_info.php', {id: id}, function(data){
var obj = JSON.parse(data);
$("#upd-name").val(obj[0].name);
var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/' + obj[0].category_image;
var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/' + obj[0].banner_image;
$( '#updCategoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
$( '#updBannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
})
}
});
HTML
<!-- category image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="category">Category Image</label>
<br/>
<div id="updCategoryPreview"></div>
<input type="file" class="img" id="upd-category" name="upd-category">
</div>
</div>
</div>
<!-- banner image -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="banner">Category Banner</label>
<br>
<div id="updBannerPreview"></div>
<input type="file" class="img" id="upd-banner" name="upd-banner">
</div>
</div>
</div>
I expect it to load the image but it displays nothing.

fed up
used this piece of code and its working
image = new Image();
image.src = url;
image.onload = function () {
$('#image-holder').empty().append(image);
};
found here
Can I get the image and load via ajax into div
thank you all for your help

Related

How to properly display the checked attributes in another div with different styles?

I am very new to jQuery. The first part of the code is to check the inputs and after checked it should display the checked items the below format. How can do this with the help of jquery.
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
After checked it should displays in this format.
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<a href="">
<span class="ic-close"></span>
</a>
</div>
</li>
</ul>
</div>
I tried like this.It was working fine for the names but got no idea how can display this user image attached with name and also there is a cancel icon too near the name.I am only being able to display name with this code.
<script>
$('input[type="checkbox"]').on('change', function () {
var name = $(this).attr('data-name');
var image = $(this).attr('data-image');
if ($(this).prop('checked')) {
$('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
$('#checked-images').append("<img src='image'")
} else {
$('#checked-names p[data-name="' + name + '"]').remove();
$('#checked-images').remove()
}
});
</script>
UPDATE
With this close button I want to remove this from checked list(which works great) as well as I want to uncheck this from checked in input.
$('body').on('click', '.ic-close', function() {
$(this).closest('li').remove()
$(this).closest('li').prop('checked',false) #didn't worked
});
This script below might be helpful for you. I only added an ID to the user-list and removed the a tag from the close button in your HTML. The JavaScript appends the HTML you wish with the name and the image to the list. If you click the close span, the item will be removed.
UPDATE:
To uncheck the checkbox by closing its user-list item, you have to add an attribute like data-name="Initiator" to the checkbox. In the JavaScript if have added two lines into the click listener of the ic-close item, see below.
$('input[type="checkbox"]').on('change', function() {
var image_url = $(this).closest( '.approval--member' ).find( 'img' ).attr('src');
var name = $(this).closest( '.approval--member' ).find( '.approval--name ~ p' ).text();
if($(this).prop('checked')) {
$('ul#user-list').append(
'<li id="' + name + '">' +
'<div class="approval--member">' +
'<img src="' + image_url + '" class="user--image" />' +
'<div class="w-100">' +
'<h6 class="approval--name">Name</h6>' +
'<p>' + name + '</p>' +
'</div>' +
'<span class="ic-close">Close</span>' +
'</div>' +
'</li>');
} else {
$('ul#user-list #' + name).remove();
}
$('body').on('click', '.ic-close', function() {
var name = $(this).closest('li').find('.approval--name ~ p' ).text();
$('input[data-name="' + name + '"]').prop( "checked", false );
$(this).closest('li').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="approval approval_scrolltab mt-3">
<li>
<div class="approval--member">
<img src="assets/images/user.jpg" class="user--image" />
<div class="w-100">
<h6 class="approval--name">Name</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input data-name="Initiator" name="one" type="checkbox" id="one" />
<label for="one"></label>
</div>
</div>
</div>
</li>
</ul>
<div class="col-xl-6 col-lg-6 col-md-6 offset-xl-1">
<h6 class="heading--form mb-2 mt-3 mt-sm-0">
User
</h6>
<ul id="user-list" class="approval approval_scrolltab mt-3">
</ul>
</div>
Simply check if you really need jQuery, in 2020 the pure Javascript have the majority of the jQuery fonctions : http://youmightnotneedjquery.com/
You can get the checked attribute via an event like this :
var checkbox = document.querySelector('[type="checkbox"]');
// Event Listener:
checkbox.addEventListener('change', function(event) {
alert(event.target.checked);
if(event.target.checked) {
// Do want do you want when checked
}
});
I don't understand very well what you expected but I hope that it could help you.

Ajax for slideshow not working

I don't seem to understand exactly how this works. When I call the get ajax method shouldn't the index change and therefore the slide should change or am I not getting something about this.
PHP/HTML
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div class='pic'>
<img src= " . $dir . $pic_array[$index] . " />
</div>
<div class='caption'>
<p id='title'>$titles[$index]</p>
<p id='des'>$descriptions[$index]</p>
</div>
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</html>";
$conn->close();
?>
Javascript
$(function () {
var arrPix = $('#json_pics').val();
var arrPix = $.parseJSON( arrPix );
var index = 0;
var $slider = $('#slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var $next = $slides.find('.next');
var $previous = $slides.find('.previous');
var $caption = $slides.find('.caption');
var slide_length = $slide.length;
$slider.hover(function() {
$caption.css('opacity', '1');
$next.css('opacity', '1');
$previous.css('opacity', '1');
}, function() {
$caption.css('opacity', '0');
$next.css('opacity', '0');
$previous.css('opacity', '0');
}
);
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
});
EDIT: Should I be using load instead?
In an endeavor to get you a solution that
Uses AJAX
and uses PHP,
I would suggest something like the following.
'getpic.php'
Summary: (A new file... used to simplify the process of getting a new picture.)
Description: Contains a function that generates the <img> tag and related info for the next image in your gallery.
$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;
function priWrap($index) {
/*
This handles the actual generating of the <img> tag as well as
the caption and such.
$index refers to a specific picture in $pix_array.
*/
global $pix_array, $dir, $titles, $descriptions;
$arr_len = count($pix_array);
if ($index < 0) {
$index = $arr_len-1;
}
else if { $index >= $arr_len) {
$index = 0;
}
echo "<div class='pic'>
<img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
</div>
<div class='caption'>
<p id='title'>" . $titles[$index] . "</p>
<p id='des'>" . $descriptions[$index] . "</p>
</div>";
}
#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
$index = intval($_GET['index']);
priWrap($index);
}
Changes to 'gallery_.php'
The code you posted should now look like this:
require_once('getpic.php');
echo "<div id='slider'>
<ul class='slides'>
<li class='slide'>
<div id='picWrapper'>";
echo priWrap($index) . "
</div><!--End #picWrapper-->
<div class='next'>
<i class='fa fa-arrow-right fa-2x'></i>
</div>
<div class='previous'>
<i class='fa fa-arrow-left fa-2x'></i>
</div>
</li>";
echo "</ul>
</div>
</body>
</html>";
$conn->close();
?>
Your javascript needs changed, too.
var index = 0;
should be
var index = parseInt($(".pic img").attr("data-ind"));
and
$next.click(function() {
index++;
$.get("gallery_.php?index=" + index);
});
should be
$next.click(function() {
index++;
$("#picWrapper").load("getpic.php?index=" + index,
/*Add callback so that index is updated properly.*/
function () {
//update our index
index = parseInt($(".pic img").attr("data-ind"));
//show our caption stuff...
$(".caption").css('opacity', '1');
}
);
});

ie9 issue with replacing iframe

We are currently developing a site for a client that we've been told has ie9 use but very strict on the requirements.
For this is having 4 placeholder images, when clicked on will open an iframe, and replace the iframe with a different video if clicked.
Simple enough to implement for our uses in modern browsers, the issue I'm having is the page sits and reloads in ie9 and doesn't open any of the iframes when being clicked on. (the code is pretty rough but the timeframe for this by the client was <1 hour and the other developer did it pretty much sitting next to a client in a meeting, and it works)
JS
if ( $('#videoLinksMain').length ) {
// //switch out video placeholder with video
function playVideo2(){
thevid=document.getElementById('thevideo');
thevid.style.display='block';
this.style.display='none';
}
//click
$('#videoLink1').click(function(){
console.log("clicked videoLink1");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink2').click(function(){
console.log("clicked videoLink2");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink3').click(function(){
console.log("clicked videoLink3");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
$('#videoLink4').click(function(){
console.log("clicked videoLink4");
var videoSRC = "https://www.youtube.com/embed/videolink?rel=0&autoplay=1"
var thevid=document.getElementById('thevideo');
$(thevid).slideDown(function() {
$("#ytVideo")[0].src = videoSRC + "&autoplay=1";
});
});
//hover
$('#videoLink1').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink2').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink3').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
$('#videoLink4').hover(
function(){
$text = "";
$('#videoDesc p').replaceWith("<p>" + $text + "</p>");
$('#videoDesc p').fadeIn("slow");
},function(){
$('#videoDesc p').fadeOut();
}
);
}//end .length
HTML
<div class="col-md-4 " id="videoLinksMain">
<div class="row">
<!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlaySml">-->
<!-- <img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1"> -->
<img src="images/vtLink-placeholder-2.png" class="img-responsive" id="videoLink1">
</div>
<div class="row margin-top-half" id="videoLinksThumbs">
<div class="col-md-4">
<!--<img src="images/play-button-light-blue.png" class="img-responsive btnPlayTbn">-->
<img src="images/vtLink-placeholder-1.png" class="img-responsive" id="videoLink2">
</div>
<div class="col-md-4">
<img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3">
<!-- <img src="images/vtLink-placeholder-3.png" class="img-responsive" id="videoLink3"> -->
</div>
<div class="col-md-4">
<!-- <img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4"> -->
<img src="images/vtLink-placeholder-4.png" class="img-responsive" id="videoLink4">
</div>
</div>
<div class="row text-center" id="videoDesc">
<p style="display:none;">This text is here to help give a textual description of each video</p>
</div>

How does one embed components with div's on jQuery .each()?

I am trying to build a photo gallery that pulls photos from flickr and displays each photo with a text box. I would like to have the below code, where div class='col-sm-6 col-md-4 center' and all child relations repeat within div class="row".
<div id="body" style="padding-top: 60px;">
<div class="row">
<!-- Section to repeat -->
<div class='col-sm-6 col-md-4 center'>
<div class='thumbnail'>
<div id="gallery"></div> <!-- Photos go here -->
<div class='input-group'>
<!-- textbox and button -->
<input type='text' class='form-control' placeholder='#tag'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>Tag!</button>
</span>
</div>
</div>
</div>
<!-- Above section repeats here 6 times -->
</div><!--./row -->
</div><!--./body -->
The Javascript that I have gotten closet with is:
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.done(function( data ) {
$.each( data.items, function( i, item ) {
$( "<img>" ).attr( "src", item.media.m ).appendTo( "#gallery" );
$( "#gallery" ).append( tagForm );
if ( i == 5 ) {
return false;
}
});
});
})();
</script>
This will pull the photos, but the textbox and button will to the right of the photo rather then bellow. I know the problem is from first 2 divs not being included, however, I don't know how embed the photo and textbox/button within the thumbnail and col-sm-6 dig's.
Any help would be amazing! Thanks ahead of time.
Provided that you want each image to go into the #gallery with its own tag button it
will be much easier to style if you group the image and span inside an element.
example output:
<div class="gallery">
<div class="img-box">
<img src="something.jpg">
<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>
</div>
</div>
<script>
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
// store this so we dont look it up every iteration
var $gallery = $("#gallery");
$.getJSON( flickerAPI, {
tags: "porsche",
tagmode: "any",
format: "json"
})
.success(function( data ) {
$.each( data.items, function( i, item ) {
// create a div to stuff img and tag in
var $img_box = $('<div class="img-box">');
$( "<img>" ).attr( "src", item.media.m ).appendTo( $img_box );
$img_box.append( tagForm ).appendTo($gallery)
if ( i == 5 ) {
return false;
}
});
});
})();
</script>

getting image from link in javascript

I have a link to an image an I would like to save it as an image.
For example the link is http://graph.facebook.com/sarfraz.anees/picture. How do I save this into an image variable in javascript so I can use it to do:
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
also would be very useful if someone can guide me on how to resize this image to a 50x50.
Here's my latest code
UPDATE:
<body id="suggestions" class="default verified ">
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({appId: '1355709392349404', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(function(response) {
if (response.session) {
pic = "http://graph.facebook.com/" + response.session.uid + "/picture";
} else {
window.location = "index.php"
}
});
</script>
<div class="clearfix" id="wrap">
<div id="nav">
<div class="center clearfix">
<h5>
Favor
</h5>
<ul class="icons menu clearfix">
<li>
<a title="You" href="/me">
<script type="text/javascript">
document.write("<img src=\"" + pic + "\" class=\"avatar\">");
</script>
</a>
</li>
Issue is that I can't get the pic that is on the other script
What's wrong with just:
document.write('<img src="http://graph.facebook.com/sarfraz.anees/picture" class="avatar">');
or...
var pic = 'http://graph.facebook.com/sarfraz.anees/picture';
document.write("<img src=\"" + pic + "\" class=\"avatar\">")
?? And it's already a 50x50 image...
var pic = document.createElement('img');
pic.className = 'avatar';
pic.src = 'sourcetopicture.png';
pic.height = '50';
pic.width = '50';
document.body.appendChild(pic);
Just substitute where you'd like to append the picture. For instance, if it were a div with the id of myDiv, you could say
document.getElementById('myDiv').appendChild(pic);
Hope this helps a bit!

Categories