I am newbie in front-end web development.
I am using flippant.js for flipping the dialogue.
<div id="overlay-box" class="overlayBox">
<a class="closeBtn" onClick="closePop()">X</a>
<button id="flipCard">Flip</button>
<div class="content" ></div>
</div>
<script type="text/javascript">
var front = document.getElementById("overlay-box")
var back_content = "
<div class = 'overlayBox' style='top: 50.5px; left: 338px; display: block;'>
<h2>Hello</h2>
<a class = 'closeBtn' onClick = 'closePop()'>Y</a>
<button id = 'closeCard'>Back</button>
<div class = 'content'></div>
</div>"
var back
document.getElementById("flipCard").addEventListener('click',function(e){
back = flippant.flip(front, back_content,'card')
document.getElementById("closeCard").addEventListener('click',function(e){
back = back.close();
})
})
But the flippant plug-in asks for back_content rather than full HTML file.
I want to override that but facing a problem.
I tried to change the flippant.js file where it was taking content and converting that into HTML whereas the front document was not converted.
I am able to use it but then I will have to write my all HTML code in back_content variable which is ugly design.
I also tried to give HTML document directly by $(HTML_file).html but still no success.
The other problem is when I am giving all the HTML in the variable then it is not calling the js classes and all styling code also
Please suggest how to use flippant plug-in.
Thanks in advance
For flippant.js code refer to its github page https://github.com/mintchaos/flippant.js/blob/master/flippant.js
Related
I am trying to figure out how to loop my jQuery/Ajax script to load two WordPress posts based off of each WordPress post ID in a div tag, so the Ajax URL loads based upon the ID tags.
You can see my example below. I am using the WordPress News blog as an example of the feed.
https://jsfiddle.net/jdcool279/7L361ru0/17/
I figured out how to load one feed based upon the post-id within the tag, but I can't seem to figure out how to load two feeds via the div tag. To see an example of single feed, please uncomment the script tag within the fiddle. Also, would it be better to change "fetch_comp_content" id tag to a class instead of an id, since I will be needing to include it twice?
Load multiple posts by div post-id:
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6848"></div>
</div>
</div>
Instead of loading 1 post via the script tag:
<script title="true" id="comp_cont_init" post-id="6810"></script>
I would also like to note that the script tag actually loads the script to run the feed. I did not include that in my fiddle, as I wanted to show the JavaScript code.
Any help on this would be much appreciated!
Thank you.
Two quick issues:
You can't repeat Id's in a page, they are unique by definition. use
class instead
You aren't making the requests in the each loop where you have access to specific element instances and the specific post id's from elements
Here's a minimalistic version of what you are trying to accomplish. All I have rendered is the title for the posts.
Note it is better to use data- attributes also
$('.fetch_comp_content').each(function() {
var $el = $(this),
postId = $el.data('post-id'),
urlstring = 'https://wordpress.org/news/wp-json/wp/v2/posts/' + postId;
$.getJSON(urlstring).then(function(data) {
var title = data.title.rendered
$el.append('<h3>' + title + '</h3>');
}).catch(function() {
console.log('Bad request')
})
});
.fetch_comp_content { border:2px solid #ccc; margin:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6846"></div>
</div>
</div>
So this is actually a very tricky concept to portray so here is my attempt.
I am utilizing an HTML form template in LANDesk Service Desk - tool is irrelevant but important to note that there is back-end code that I cannot touch that is generating HTML.
So basically, the tool is pulling data from a back-end database containing a list of objects. It then inputs this data into an HTML form template that I have created using variables as placeholders for the objects. The HTML is then built on the fly with however many objects are in the database. Thus, I have no way of accessing the head - (which means native JS, and inline CSS).
My template looks like this...
<div class="my-template">
<a class="my-template my-link">My Link</a>
</div>
<script>
var myLinks = document.getElementsByClassName('my-link');
for (var i = 0 ; i < myLinks.length ; i++) {
myLinks[i].style.display = "none";
}
</script>
When I view the source on the loaded page it looks something like this...
<body>
<!--misc. page stuff-->
<!--First Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
<!--Second Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
</body>
All of the elements are formatted the way I want them to be...besides the last element on each page. I have determined that this is because each time the tool is running the object through the template, it is running the script. The issue is, there is a stupid default button that they place at the bottom of each object that is broken. (This is why I have the script changing the style to display: none..should have mentioned this earlier). Basically I want to delay the execution of the script until not only the object has been run through the template...but the entire page has loaded...but I can't seem to get the last button to go away.
I know that this is a lot of poorly written words trying to form an explanation, but I really think this is impossible...but I am convinced there has to be a way. (Also, the company isn't providing us with any help in finding a workaround, so I had to basically MacGyver this one
I am really not great at web stuff, so I am apologizing in advance for a potentially poor explanation of my problem.
Basically, I have a webpage which utilizes the handlebars js templating. Unfortunately, this means that many of my div elements are contained within javascript tags like the following:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
......
</div>
<div class="descript">
.....
</div>
</script>
My intent is to grab one of these div elements using jquery.find(), but from what I understand, the html within the script tags is not treated as part of the dom...so jquery does not see it as a dom element. I was wondering if there is any other way I could go about this. Some more code is included.
Here is another more explicit explanation in case the one I gave above was a little muddled: I am working on a personal website and would like to embed a project I have been working on in unity3d, but I need to add/remove elements based on whether or not the client has the unity3d web player installed. Normally I would get a particular element with
var $missingScreen = jQuery("#unityPlayer").find(".missing");
where 'missing' is simply an element inside unityPlayer which displays a link if the client does not have unity3d. I am also using some javascript templating to make my site look pretty and as a result, I have this problem:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
<div class="intro-text">Hi, I'm *****</div>
</div>
<div class="descript">
<p>
Here's a Project I have been working on in case I am of interest to you:
</p>
</div>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with Unity »</p>
</script>
Jquery cannot access the missing element. Is there any way to do this? Thanks for any help you can give me and sorry again for my inexperience.
EDIT* some people might want to know: here is how I determine whether or not to show the missing div. Another note; everything works fine if I remove the script tags...it is only when I put html within the script tags that it becomes inaccessible to jquery.
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
$missingScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "temmp.unity3d");
});
Instead of
var $missingScreen = jQuery("#unityPlayer").find(".missing");
I would try out
var $missingScreen = jQuery("#unityPlayer").children(".missing");
or
var $missingScreen = jQuery("#unityPlayer .missing");
Don't forget the space between Player and .missing!
I hope it works.
I have a bit of what seems like a complicated issue(to me at least)
I've got an external javascript file generating html content for me. It's for tweets. It gives each one a individual ID, which I can see in the browser but of which is obviously not in my index.html.
The JS generates something like this in the browser http://i.imgur.com/8yxLYBa.png
Heres the generated div
<div class="twitter-article" id="tw1"><div class="twitter-pic"><img src="https://pbs.twimg.com/profile_images/461533054800900097/5h4n1K31_normal.jpeg" twitter-feed-icon.png"="" width="42" height="42" alt="twitter icon"></div><div class="twitter-text"><p><span class="tweetprofilelink"><strong>JGD</strong><br> #jdrawsthings</span></p><b><span class="tweet-time"></span></b><d>2h, Glasgow. Favorites: 0 Retweets: 0</d><br><c>Literally desperate and just need to secure a nice room in a nice flat close to DJCAD so I can move in June 20th</c></div><div class="favourite-item" id="fav1"><button class="favouriteButton" id="favBut1"></button></div><div id="twitter-actions" style="opacity: 0; margin-top: -20px; display: none;"><div class="intent" id="intent-reply"></div><div class="intent" id="intent-retweet"></div><div class="intent" id="intent-fave"></div></div></div>
Each one has a button assigned to it, which each also have individual IDs.
I'm wanting to use the clone function to copy across the contents of say, '#tw1' into '#faveDiv'. #faveDiv been a div on my index.html page.
<div id="favouriteStreamHolder">
<div id="favouriteStream" style="display: none;">
<div id="faveDiv"></div>
</div>
</div>
Here is the clone function I'm trying
$("input#favBut1").live( 'click', function(){
$('#faveDiv').html($('#tw1').html());
});
There's to much going on that relies on PHP that putting it into a simulator wouldn't achieve anything. Basically, that JS creates this. i.imgur.com/8yxLYBa.png A stream of 25 tweets of which the content is created in that js function having been pulled from a JSON file. I'm under the assumption that the .clone() function should copy all within the div and duplicate it into the div ive specified. At the moment. It's doing nothing, the div is just empty. Bit new to this, sorry. If theres anything else you need to know. Just say.
Any idea why this isn't working?
Try this (pattern)
html
<div id="favouriteStreamHolder">
<div id="favouriteStream">
<div id="faveDiv"></div>
<!--
duplicate `favBut1` in `feedHTML`,
substitute `id` `feed` for `favBut1`
-->
<input type="button" id="feed" value="click" />
</div>
</div>
js
$(function () {
// var feedHTML = `$.parseHTML(feedHTML)`
var feedHTML = $.parseHTML('<div class="twitter-article" id="tw1">..</div>');
$(document).on("click", "#feed", function (e) {
e.preventDefault();
$(e.target).siblings("#faveDiv").html($(feedHTML));
});
})
jsfiddle http://jsfiddle.net/guest271314/ReK9u/
Many apologies if I'm being really dopey here - I've been searching most of the morning for the answer to this but maybe I'm searching in the wrong terms. I'm using Google App Engine, with Python code to set up my webapp. I've managed to set up the basic page structure using the following HTML code:
main_html = """
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="static/css/main.css">
</HEAD>
<BODY>
<DIV class="wspace">
<BR>
</DIV>
<DIV class="header">
<FONT class="logoFont">Logo Text</font>
</DIV>
<DIV class="maincontainer">
<DIV class="sidebar" id="leftsidebar">
<SCRIPT>
var lsCanWid = document.getElementsByTagName("div"["leftsidebar"].offsetWidth
var lsCanHei = document.getElementsByTagName("div")["leftsidebar"].offsetHeight
</SCRIPT>
</DIV>
<DIV class="sidebar" id="rightsidebar">
<SCRIPT>
var rsCanWid = document.getElementsByTagName("div")["rightsidebar"].offsetWidth
var rsCanHei = document.getElementsByTagName("div")["rightsidebar"].offsetHeight
</SCRIPT>
</DIV>
<DIV class="mainscreen" id="mainscr">
<SCRIPT>
var mainCanWid = document.getElementsByTagName("div")["mainscr"].offsetWidth
var mainCanHei = document.getElementsByTagName("div")["mainscr"].offsetHeight
</SCRIPT>
%(MAINCONTENT)s
</DIV>
</DIV>
<DIV class="footer">
Footer Text
</DIV>
<DIV class="wspace">
<FONT class="crnotice">Copyright Notice Text</FONT>
</DIV>
</BODY>
</HTML>
"""
I've tested the javascript variables, and these work exactly as planned (lsCanWid returns the left sidebar width for example).
I've then got the following code in my Python:
class MainHandler(webapp2.RequestHandler):
def get(self):
lsCanWid = self.request.get('lsCanWid')
lsCanHei = self.request.get('lsCanHei')
rsCanWid = self.request.get('rsCanWid')
rsCanHei = self.request.get('rsCanHei')
mainCanWid = self.request.get('mainCanWid')
mainCanHei = self.request.get('mainCanHei')
temp_str = str(lsCanWid)
self.response.write(main_html %{"MAINCONTENT": temp_str})
app = webapp2.WSGIApplication([
('/', MainHandler)
], debug=True)
I've not tried to use self.request.get within a "get" before, so I'm not sure if this is the problem. The python code is working fine if you replace temp_str with some other string, so that's not where my issue lies. I'd be really grateful of any help here!
In short - You aren't sending these values back to your handler, you need to add them to the query string or post them back.
Javascript runs the browser. Once the page has rendered in the browser, there is no connection with your back end code. In order for your Python code to know anything from the browser, you have to send it back to the code. This is just how HTTP works. Its a "request/response" cycle and there is no connection once the response (what you send to the browser) is finished.
So, to send these values back to your code you need to append them to the request as part of a query string, something like /foo?lsCanWid=3&lsCanHei=4 (and so on). You would need to build this URL using javascript, and then add it to a link which you would have to click - then, on the next request (once this new link is clicked), your Python code will receive the values.