Im trying to initialize a 360Ui audio player with soundmanager 2.
In the first page load, players appeared as it was expected. Then if i refresh the page with Ctrl+R or By clicking on the refresh button soundmanager seems not to be initialized.
I have create these divs:
<div id="pl1" class="ui360" >
<a id="a1" href="#"></a>
</div>
<div id="pl2" class="ui360">
<a id="a2" href="#"></a>
</div>
<div id="pl3" class="ui360">
<a id="a3" href="3"></a>
</div>
and on the main.js when the page being loaded this code will be executed.
$(function(){
$('#designed-by,#pl1,#pl2,#pl3').hide();
// Loading audio players.
loadpls();
soundManager.setup({url:'../audioPlayer/soundmanager/swf'});
});
Also here is the loadpls() function:
function loadpls(){
// Loading audio players
$.ajax({
url: '../admin/classes/classController.php',
type: 'POST',
data: {method:'loadAudioPl'},
dataType: 'json',
error: function(jqXHR, error, errorThrown){console.log(jqXHR+" "+error+" "+errorThrown);},
success: function(json){
if(json.status == 1){
if(json.url1 != ''){
$('#a1').attr("href", json.url1);
$('#pl1' ).offset({top: json.y1, left: json.x1});
$('#pl1').show();
}
if(json.url2 != ''){
$('#a2').attr("href", json.url2);
$('#pl2' ).offset({top: json.y2, left: json.x2});
$('#pl2').show();
}
if(json.url3 != ''){
$('#a3').attr("href", json.url3);
$('#pl3' ).offset({top: json.y3, left: json.x3});
$('#pl3').show();
}
}
}
});
}
Ok. Lets suppose now that its the first time that we visit the page. And we make an 'inspect element' in player's icon. We could see that the soundmanager initialized successfully by seeing the code above:
<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
<div class="sm2-360ui">
<canvas class="sm2-canvas" width="50" height="50"></canvas>
<span class="sm2-360btn sm2-360btn-default"></span>
<div class="sm2-timing alignTweak"></div>
<div class="sm2-cover"></div>
</div><a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3" class="sm2_link"></a>
</div>
There are times that if we refresh that page, the audio player disappear and now the results of the 'inspect element' somewhere in the page show us this:
<div id="pl1" class="ui360" style="display: block; top: 0px; left: -100px; background-image: none;">
<a id="a1" href="http://dev.phoebe/audioPlayer/soundmanager/_mp3/rain.mp3"></a>
</div>
I translate that behavior as a non initialation of soundmanager but i cannot explain it further more. Also, something else that i considered is that if i let the console (Ctrl+Shift+I) open, the player appeared more times after the refresh.
So finally it seems that i fixed it.
Here is how.
There was indeed a problem with initialization of soundmanager and probably because i used such a code :
<div id="pl1" class="ui360" >
<a id="a1" href="#"></a>
</div>
The problem here is that in href="" attribute there is no .mp3 extension file and thats why soundmanager couldn't initialized. So by changing that code into the above one, without test.mp3 exist, seems to work as expected.
<div id="pl1" class="ui360" >
<a id="a1" href="test.mp3"></a>
</div>
Related
I am using easyzoom to zoom image on hover. I am changing images by clicking from the list but when i click for the first time the zoom works fine. When i click another image, i console to see the current href value and it appears fine but zoom image doesnt change
function setImage(source) {
// console.log(source);
$('a#zoom_img').attr('href', 'http://localhost:8080/ipfs/' + source);
$('#displayimage').attr('src', 'http://localhost:8080/ipfs/' + source);
console.log($('#zoom_img').attr("href"));
$('.easyzoom').easyZoom();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="easyzoom easyzoom--overlay">
<a id="zoom_img" href="">
<img src="" id="displayimage" alt="" style="height: 480px; margin: auto; width: auto;" class="" />
</a>
</div>
You need to use the .swap() function. Look into the API description for more information. Here is a little snippet to demonstrate that:
//init easyzome and get api-reference
var easyzoom = $('.easyzoom').easyZoom ();
var api = easyzoom.data ('easyZoom');
//this function uses .swap () to change the images
//it gets called by the buttons onclick-attribute
function switch_image (std_src, zoom_src) {
//std_src = the source to your standard-image (small verison)
//zoom_src = the source to your zoom-image (big version)
api.swap (std_src, zoom_src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://i-like-robots.github.io/EasyZoom/dist/easyzoom.js"></script>
<link rel="stylesheet" href="http://i-like-robots.github.io/EasyZoom/css/easyzoom.css">
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg')">switch to image 1</button>
<button type="button" onclick="switch_image ('http://i-like-robots.github.io/EasyZoom/example-images/3_standard_1.jpg', 'http://i-like-robots.github.io/EasyZoom/example-images/3_zoom_1.jpg')">switch to image 2</button>
<br><br>
<div class="easyzoom easyzoom--overlay">
<a href="http://i-like-robots.github.io/EasyZoom/example-images/1_zoom.jpg">
<img src="http://i-like-robots.github.io/EasyZoom/example-images/1_standard.jpg" alt="" />
</a>
</div>
I want to upload image to the server, I have two images, one on left side currently i am uploading other is previously uploaded image to the right. left Side image will appear when user clicks the "Upload" button , after upload I have provided "X" mark to the right of the Image, after clicking "X" I hiding that uploaded image. Once again If I upload same Image which I uploaded earlier which is not uploading why? . If I upload some other Image it is uploading.
<div ng-click="deleteLocalfile()" ng-hide="deletePreviewImage" ng-show="showImage" class="img-wrap">
<span class="close">×</span>
<img ng-src="{{imagepreviewUrl}}" ng-if="imagepreviewUrl" style="width: 100px; height: 100px;" alt="" data-id="103">
</div>
<a ng-show="user.photo.photoProof" href><img ng-src="{{tabindexUrl}}" style="width: 100px; height: 100px;" alt=""></a>
<div class="fileUpload btn btn-primary" flow-attrs="{accept:'image/*'}">
<span>Upload</span>
<input data-flow-btn type="file" ng-model="user.photo.photoProof" name="photoProof" id="photoProff" class="upload"/>
</div>`<div class="list-group mt-md mb-0" data-ng-show="$flow.files.length" data-ng-repeat="file in $flow.files">
<div class="box-layout list-group-item" data-ng-hide="fileUploadSuccess">
<div class="col-xs-2 va-m">
<span class="img-wrapper img-rounded" style="width:50px;"><img imageonload="onImgLoad('photo')" flow-file-added="validate($file)" flow-img="file" alt="" style="width: 50%; height: auto;"></span>
</div>
<div class="col-xs-5 va-m">
<div class="progress progress-sm nm">
<div class="progress-bar" ng-style="{width: (file.progress() * 100) + '%'}"></div>
</div>
<div class="col-xs-5 va-m"><strong>{{file.name}}</strong > {{file.size}} bytes</div>
</div>
</div>
</div>`
Controller Code:
$scope.onImgLoad = function(type){
$scope.deletePreviewImage = true;
$scope.previewImageUrl = '';
switch (type){
case 'photo':
MyService.getBase64Content($scope.flow.photoDoc.files[0].file, function(e){
$scope.user.photo.photoProofContent = e.target.result.substr(e.target.result.indexOf(',') + 1);
$scope.imagepreviewUrl = 'data:image/jpeg;base64,'+ $scope.user.user.photoProofContent.replace(/['"]+/g, '');
$scope.previewImageUrl = $scope.imagepreviewUrl;
$scope.deletePreviewImage = false;
});
deleteLocalfile method:
$scope.deleteLocalfile = function(){
$scope.showImage = false;
$scope.deletePreviewImage = true;
}
After Image Upload say "1.jpeg" it will appear as left as side Image , after clicking "X" on this image, it will hide , later If I upload same Image say "1.jpeg" I am not able to load its not calling $scope.onImgLoad() method, If I upload some other Image say "2.jpeg" it is appearing as left side Image. why "1.jpeg" not coming? the src attribute in image tag holding previous image, its not changing why?.
when uploaded one file and upload the same file again, browser won't trigger change event。 So before uploading the same file , you need set input's value to empty string. For example, $('#photoProff').val('');
I don't reading your code carefully , if you provide a codepen url address or jsFiddle url address, I can know more.
Very simple solution for you is - Use ng-if instead of ng-show or ng-hide.
ng-if will load element in html only when condition is ture, else not. whereas in case of ng-show or ng-hide , only display of image is set to block or none respectively, but image is always in DOM.
Example
<img ng-src='someurl' ng-if="condition==true" />
I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`
<div data-role="page" id="leavebal_page" class="home_page_style" style="position:fixed; overflow:hidden;">
<div data-role="content" id="leavebal_page_content"style="overflow:hidden;margin: 0;
padding: 0;" >
<div id="leavebal_header" style="width: 100%; margin: -2%; height:12.5%;">
<h4 style="text-align: center; color: white;line-height: 3;">AppName</h4>
Menu
Back
</div>
<hr style="width:100%; margin-top:-9%;">
<div id="leave_query" class="open_tab_bckgrnd" style="margin-top: -6%;">
<h6 style="background-color:#D3D3D3;text-align:center;height:6%;color: #C32036;text-shadow: none;font-size: 18px;font-weight: normal;position: relative;top: 2%;">Leave Balance</h6>
<div data-role="collapsible-set" id="leavebalstatus">
</div>
</div>
</div>
</div>
I want to clear previous data every time I left my page. I used .empty() & html('') for this but it is not working. Please help me.
Here is my code -
$("#leavebalstatus").html(" ");
$("#leavebalstatus").empty();
var leaveBallist= '';
for( i=0; i<getLeaveBal.length;i++){
leavebalgrp_name = getLeaveBal[i].find('Leave_Group_Name').text();
leavebal_code = getLeaveBal[i].find('Leave_Type_Code').text();
leavebal_name = getLeaveBal[i].find('Leave_Name').text();
leaveBallist += '<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" style="background:white;" id="leaveBalMainData"><h3 style="margin-bottom:2%;"><div style="width:100%;" id="leaveBal_contaner"><p style="display:inline-block;width:35%;background: red;text-align:center; color:white;">'+leavebal_name+'</p><p style="display:inline-block;width:60%; margin-left:5%;">'+leavebalgrp_name+'</p></div></h3>';
for(k=0; k<collapseArray.length;k++){
if (i == k){
leaveBallist += '<p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block;float:left;">Entitled</span><span style="width:33%; dispaly:inlne-block;float:left;">Availed</span><span style="width:33%; dispaly:inlne-block;float:left;">Balance</span></p><p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveEntitled').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveAvailed').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveBal').text()+'</span></p>';
}
}
leaveBallist += '<p style="width:100%;"><hr style="width:100%;"></p><p style="width:100%;"><span style="color:red; width:100%;font-size:16px;margin-left:42%" onclick="applyLeaveForBal('+i+');">APPLY</span></p></div>';
}
$('#leavebalstatus').html(leaveBallist);
// $('#leavebalstatus').collapsible();
$('#leavebalstatus').collapsibleset( "refresh" );
$('#leavebalstatus').trigger("create");
for clearing data from page I tried calling
$(document).on("pagehide", "#leavebal_page", function(event, ui){
alert(event.target);
$('#leavebalstatus').empty();
$('#leavebalstatus').html('');
});
but both is not working.Thanks for help
Its because you are creating the value again even after the value is emptied by the following code in the snippet:
$('#leavebalstatus').collapsibleset( "refresh" );
$('#leavebalstatus').trigger("create");
the value is emptied but at the end again refreshed and created.
You should set a flag to check whether the pagehide event occurred and if not occurred execute above two else not.
You could try with remove this way:
$("#leavebalstatus").children().remove();
I hope this helps you!
document.getElementById("#leavebalstatus").reset();
I can't be sure about what I'll say without testing it but maybe it can help. Last week I was working with Bootstrap and I had troubles with a modal when I tried to clean it in certain cases.
The thing was that in some situations Bootstrap was creating the modal again as a direct child of the body. So when I called the empty function it was pointing somewhere else.
My suggestion is to evaluate the alert($('#leavebalstatus').length) as #AlenaKastsiukavets says in the comments but changing the leavebalstatus id into a class, so that way jQuery doesn't have problems selecting more than one object.
Finally I solved it by putting the modal as a direct child of the body but obviously it's probable that the solution you need may change a bit.
var popup;
jQuery(document).ready(function(){
jQuery(window).bind('load',windowLoadComplete);
});
function windowLoadComplete() {
var settings = new Object();
popup = new SSKpopup(settings);
popup.createPopup();
jQuery('a').each(function(n){
if(jQuery(this).attr('href').indexOf("popup#")>-1) {
jQuery(jQuery(this).attr('href').split("popup#")[1]).hide();
jQuery(this).click(function(e) {
e.preventDefault();
popup.loadContent(jQuery(jQuery(this).attr('href').split("popup#")[1]));
});
}
});
}
I have that piece of code that is to create a popup containing pictures, information just like like http://jqueryui.com/demos/tabs/ and in my html code I create the popup as follows,
<a class="popup" href="/main/popup##hulk">Key Speakers</a>
<br>
Chairman
</p>
<div id="hulk" style="width: 450px; display: none;">
<img class="popup_img" border="0" alt="" src="/main/images/speaker.jpg">
<p>Content descriping the speakers</p
</div>
When I use firebug over the href I see the address different from normal location and if I insert into its as index.php/main/popup#$hulk to be same as every other links and click it then, the page direct me to localhost/xampp/. Of course no popup was displayed.