I have a link that when clicked uses .replaceWith to fill a div with html code for a .swf file. Below is an example:
$().ready(function() {
$('a.roots').click(function() {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
"<param name=\"movie\" value=\"flash/roots.swf\" />" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<div>" +
"<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
"<p>" + "" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "" + "</p>" +
"</div>" +
"</object>" +
"</object>" +
"</div>" );
}); });
I want the swf html inserted the first time the link is clicked. If it is clicked again I want the div html changed to something else. For example:
$('a.roots).click(function() {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" +"" +
"</div>" );
}); });
How do I create a listener to determine if the link has been clicked once and have it then remove the .swf html code and replace it with the new code?
I also thought maybe using cookies to check:
$('a.roots').click(function() {
if($.cookie('rootsclicked') != null) {
$('#flashcontent').replaceWith( "" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" + "" );
}
else {
$('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
"<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
"<param name=\"movie\" value=\"flash/roots.swf\" />" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
"<param name=\"quality\" value=\"high\" />" +
"<param name=\"wmode\" value=\"opaque\" />" +
"<param name=\"BGCOLOR\" value=\"#394A59\" />" +
"<param name=\"swfversion\" value=\"6.0.65.0\" />" +
"<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
"<div>" +
"<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
"<p>" + "" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "" + "</p>" +
"</div>" +
"</object>" +
"</object>" +
"</div>" );
//and set a cookie named "rootsclicked"
setcookie();
function setCookie(){
document.cookie = 'cookieName=rootsclicked'; expires="1/01/2015 00:00:00";
};
};
});
Would something like this work or am I making it too complicated?
You can use data method to store a value to see if the element was already clicked:
$(function() {
$('a.roots').click(function() {
var alreadyDone = ($(this).data("clicked") == "1");
if(alreadyDone){
$('#flashcontent').replaceWith("<WITH-OTHER-CONTENT>");
} else {
$(this).data("clicked", "1") ;
$('#flashcontent').replaceWith("<WITH-SOME-CONTENT>");
}
});
Use a data object:
$('a.roots').click(function()
{
if($(this).data('clicked') === true)
{
// do something else
}
else
{
$(this).data('clicked',true);
// do normal thing
}
});
Related
I have a leaflet map running on a server whose popups are automatically filled with images. Some popups contain three images. The problem is that the broken image icon appears on those that contain fewer images. I've already tried to remove them with alt="", but it doesn't work.
Attached is a link to the app/code.
function forEachFeatureCC(feature, layer) {
var popUp =
"<h2>" + feature.properties.Name + "</h2>" +
"<img src='" + feature.properties.Bildlink + "'width='300'</img>" +
"<br>" + "<br>" +
"<h4>" + feature.properties.Beschreibung +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_2 + "'width='300'</img>" +
"<br>" + "<br>" +
"<img src='" + feature.properties.Bildlink_3 + "' width='300' alt=''</img>" +
"<br>" + "<br>";
layer.bindPopup(popUp).update();
}
https://wasserwiki.eu/Wasserwiki_App_Mobile
OK, I see, you simply don't want to show the absent images. In that case you can do:
function getImageHtml(imagelink)
{
return "<img src='"+ imagelink + "' width='300'</img>" + "<br>" + "<br>";
}
function forEachFeatureCC(feature, layer)
{
var popUp = "<h2>" + feature.properties.Name + "</h2>";
if (feature.properties.Bildlink) {
popUp = popUp + getImageHtml(feature.properties.Bildlink);
}
if (feature.properties.Bildlink_2) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_2);
}
if (feature.properties.Bildlink_3) {
popUp = popUp + getImageHtml(feature.properties.Bildlink_3);
}
layer.bindPopup(popUp).update();
}
I didn't test the code, so some debugging might be needed, but I think the general idea is clear?
i created a double click event on a div , when i click twice a heart react appears on top of the image , on the web browser vue it works fine but when i pressed F12 and switched to mobile view it didn't work
here is my javascript function :
$(document).on("dblclick", '#tesst', function (e) {
var heart = $(this).find("i");
heart.fadeIn("slow");
setTimeout(function () {
heart.fadeOut("slow");
}, 2000);
heartReact();
});
here is my div :
stringMsg =
'<div class="/col-lg-4 delcd-tours animate-box/">' +
'<div id="tesst" class="hot-img-container" >' +
'<a href="#">' +
'<div class="instagram">' +
'<i id="heart" class="fa fa-heart">' + '</i>' +
'<img src="" id="myImgTag' + element.id_publication + '" class="img-fluid" alt="" />' +
'</div>' +
"</a>" +
'<div class="desc">' +
"<span>" +
"</span>" +
"<h3>" +
element.pays +
"</h3>" +
"<span>" +
"</span>" +
'<span class="price">' +
element.budget +
"</span>" +
'<a class="btn btn-primary btn-outline" href="tour-detail.html">' +
"View Trip" +
'<i class="icon-arrow-right22">' +
"</i>" +
"</a>" +
"</div>" +
"</div>" +
"</div>";
document.getElementById("pubslist").innerHTML += stringMsg;
document.getElementById("myImgTag" + element.id_publication).src = element.imagePub;
is there any solution for this problem to make it work on both web and mobile view
I try make a poll, basically I refresh my petition every 3s to the API using jsonp and getJSON the problem is my view also refresh at the same time and blink in the interface of the client (HTML), I have some like this
var chatbox = $("#chatbox");
singleChatView();
setInterval(function () {
chatbox.empty();
singleChatView();
}, 1000);
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function (chats) {
console.log(chats);
$.each(chats.DATA, function (key, c) {
$('.msgRecipientName').text(c.SENTBY.name);
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
chatbox.append(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" +
formatDate(c.CREATEDON) +
"</div>" +
"</li>"
);
} else {
chatbox.append(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
});
}
I don't have any idea how I can do this and void this issue with the view, can some one help me, all this is new for me thanks
I would suggest trying the following. The blink is most likely due to you clearing the chatbox and not putting anything in there until the ajax returns. This version, aside from reducing the number of times the DOM is changed, also doesn't replace the chatbox until it has built all the html that should be in it.
var chatbox = $("#chatbox");
//start the chat loop
singleChatView();
function singleChatView() {
var chatid = localStorage.getItem('chatid');
$.getJSON("http://myapi/?chatid=" + chatid + "&jsonp=?", function(chats) {
console.log(chats);
//collect the messages
//if we update the page once, the browser has to do less work rendering
//all the changes
var messages = [];
//keep track of the "c.SENTBY.name"
//since you are doing a global selector and setter, the value will
//end up being the last value you update all them to be anyway
//no need to update multiple times
var sendby = '';
$.each(chats.DATA, function(key, c) {
sentby = c.SENTBY.name;
if (c.SENTBY.id == userInfo.PROFILE.USERID) {
messages.push(
"<li class='msgThread group currentUser'>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
} else {
messages.push(
"<li class='msgThread group'>" +
"<div class='msgAuthor' style='background: #fff url(myapi/100_couple.png) 50% background-size: cover;'>" +
"<a ng-href=''>" +
"<span></span>" +
"</a>" +
"</div>" +
"<div class='msgBalloon group'>" +
"<div class='msgHeader'>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgFull'>" + c.MESSAGE + "</div>" +
"</div>" +
"</div>" +
"<div class='msgFrom'>" + c.SENTBY.name + "</div>" +
"<div class='msgDate'>" + formatDate(c.CREATEDON) + "</div>" +
"</li>"
);
}
});
//update the recipent with the last sent by, once
$('.msgRecipientName').text(sentby);
//replace all the chatbox text with the collected html that would have
//otherwise been append one at a time
chatbox.html(messages);
//now that we've finished this iteration, start the next iteration after
//a second
setTimeout(singleChatView, 1000);
});
}
I am appending check-boxes in a div by jQuery. Div is scroll when overflow. But I see that when checkbox names are large then div does not horizontally scroll but extra content goes to next line while vertical scroll works fine . below is some code
below is code of div creation
<div id="legendBox" style="overflow:scroll;width:145px;height:300px;"></div>
This code is to add check boxes in DIV
if (legendChecked == "T")
{
legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' checked onClick=legendChanged(); title='" + legendName + "' />" + legendName;
} else
{
legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' onClick=legendChanged(); title='" + legendName + "' />" + legendName;
}
$("#legendBox").append(legendtest+"</br>");
Please tell me where is mistake.
Or add display:inline: http://jsfiddle.net/eq3r9/
Edit:
This is a better solution: http://jsfiddle.net/eq3r9/1/
I have a json file which contains questions and answers like this.
{
"Questions": [
{ "Q": "I enjoy playing video games" },
{ "Q": "I enjoy reading" },
{ "Q": "I enjoy watching tv" }
],
"Answers": [
{
"a": "Strongly Agree",
"b": "Agree",
"c": "Neutral",
"d": "Disagree",
"e": "Strongly Disagree"
}
]
}
The answers are always the same for each question. I am trying to do a loop in javascript to display each questiona the answers under it, something like this
1.I enjoy video games
RadioButton:Strongly agree RadioButton:Agree etc...
2. I enjoy reading
RadioButton:Strongly agree RadioButton:Agree etc...
right now i have this, but it doesn't really work
$.getJSON("questions.json",function(data)
{
$.each(data, function(i,data)
{
var div = document.createElement("div");
div.setAttribute("id", i);
document.createElement("div").setAttribute("id", i);
var div_data = "<div class='questions'><h2>" + data.Questions.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + 1+"' value='"+data.Answers.a+"'/>" +
"<label for='q" + i + 1+"'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + 2+"' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + 2+"'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 3+"' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + 3+"'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 4+"' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + 4+"'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 5+"' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + 5+"'>" + data.Answers.e + "</label>"
+"</div>" ;
document.getElementById("box").appendChild(div);
div.innerHTML = div_data;
});
});
You have to loop through data.Questions. See the code below. I have also optimized your code, so that the HTML is appended at once, rather than separately for each element.
Another note: You should change the i + 1, 1 + 2, 1 + 3, etc part to something more appropriate. Currently, it's just added, because it's inside a string context. Even if you add parentheses, the logic is still flawed: For i=1, i+2 = 3. For i=2, i+1 is also 3.
I have replaced i + 1 + "' with i + "_1', to give you an idea of the right approach.
$.getJSON("questions.json",function(data)
{
var html = "";
$.each(data.Questions, function(i, question)
{
html += "<div id=" + i + ">" +
"<div class='questions'><h2>" + question.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + "_1' value='"+data.Answers.a+"'/>" +
"<label for='q" + (i + "_1'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + "_2' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + "_2'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_3' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + "_3'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_4' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + "_4'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_5' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + "_5'>" + data.Answers.e + "</label>"
+ "</div></div>" ;
});
$("#box").append(html);
});
You aren't accessing the JSON properly. data.Questions.Q and data.Answers.a is not correct.
Both data.Questions and data.Answers are arrays. You would have to loop through those arrays and access them like data.Questions[i].Q.
Or change your JSON to match how you want the code to be able to iterate them. You can fix one or the other, but the two must match. It looks to me like you want to fix the code for the questions and fix the JSON for the answers, but that's a design decision that you can make.