I am developing a website wherein I want to use the facebook comment plugin, and I want to customize comments' CSS. I am using ASP.NET MVC architecture and my page requires that I send the href for the fb:comments via ViewData. Due to this I am adding my facebook comments tag using javascript to a div in my page.
I am trying to Customize the CSS by referring
http://www.daddydesign.com/wordpress/how-to-customize-the-facebook-comments-social-plugin-on-a-static-fbml-tab/
but it seems by CSS is not being applied to my facebook comments section.
The Code is as follows:
<script type="text/javascript">
$(function () {
Url = '<%=ViewData["Url"] %>';
Xid = '<%=ViewData["Xid"] %>';
document.getElementById('fb_comments')
.innerHTML = "<fb:comments href="
+ Url
+"num_posts=\"4\" xid="
+ Xid + " width=\"350\"></fb:comments>";
});
</script>
<style type="text/css">
#fb_comments {
width: 350px;
float: left;
font-family: Arial, Helvetica, sans-serif;
color: #909090;
min-height:850px;
height:100%;
background-color: #E8E8E8;
}
#fb_comments a {
color: #909090;
}
</style>
</head>
<body style="width:350px;">
<div>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>
<div id="fb_comments">
</div>
</div>
</body>
</html>
Can someone please help!
Thanks!
See the comment by the post's author at the bottom.
HI, to our knowledge, you cannot style the regular facebook comments anymore. If anyone knows how to, please share here.
Related
I have a problem in pickadate calender. I found an issue in pickadate at end of the page please go through the attachment . I have to open the pickadate calendar top of the input field while the input field at the end of the browser.
I have tried below code:
$('#description_award').pickadate({
format: 'yyyy-mm-dd',
formatSubmit: 'mm/dd/yyyy',
min: scriptDate,
max: maxDate,
drops: "up"
});
Specify the root for the picker by using the container-option i.e.: container: '#my-root'. You can put that root element anywhere. And then you can target the picker with css. for example #my-root .picker__holder { bottom:0; } would make it appear above the root (because it's absolutely positioned)
jQuery(document).ready(function(){
jQuery('.datepicker').pickadate({container:"#my-root"});
});
html { padding-top: 150px; /* just for stack-overflow */ }
#my-root { outline: 1px solid red; /* just a visual clue */ }
#my-root .picker__holder { bottom: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.date.css" rel="stylesheet"/>
<div id="my-root">
<!-- datepicker will appear where this element is -->
</div>
<input class="datepicker" placeholder="clickme">
I'm trying to make a custom infowindow in CartoDB Editor. From the docs, it should be possible to use a <style> block to specify or override the default styles. But it seems like the whole block get's ignored. When I look at the Chrome Dev Tools, my styles are not present at all. They don't get overridden, they are just not there. Inline styles work fine, though.
The markup for the info window popup:
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h4 {
color: #fff;
}
div.cartodb-popup.v2.custom p {
color: #ff0;
}
</style>
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h4>{{boroname}}</h4>
<p>Borough code: {{borocode}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Any ideas what I could be doing wrong? I already tried it with and without the custom class, but I left it in there, because i thought some extra specifity won't do any harm. I'm pretty sure this <style> approach worked a year ago.
I could do most styling using inline styles, but that's very cumbersome and doesn't work for pseudo elements, like the small popup arrow.
Any way to do this on the web interface, or do we need to host this on our own servers to edit the .js scripts, etc?
This is my map: https://stekhn.cartodb.com/viz/a2534c80-87b0-11e5-a2ef-0e787de82d45/embed_map
The example above is outdated and <style> blocks in the infowindow editor are not allowed any more. You can only use CSS inline styles in the CartoDB frontend editor. To get full control over the infowindow and the tooltip appearance, use cartoDB.js. In this example I'm changing the popup background color to grey:
<link rel="stylesheet" type="text/css" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<style type="text/css">
div.cartodb-popup.v2.custom {
background: #666;
}
div.cartodb-popup.v2.custom:before {
border-top: 14px solid #666;
}
div.cartodb-popup.v2.custom h3,
div.cartodb-popup.v2.custom p {
color: #fff;
}
</style>
<section id="map"></section>
<script type="infowindow/html" id="template">
<div class="cartodb-popup v2 custom">
x
<div class="cartodb-popup-content-wrapper">
<h3>{{name}}</h3>
<p>{{description}}</p>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script type="text/javascript">
cartodb.createVis('map', 'https://your-accout.cartodb.com/api/v2/viz/477bdfc0-8210-11e5-936b-0e787de82d45/viz.json', {
tiles_loader: true,
center_lat: 48.6,
center_lon: 11.4,
zoom: 7
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(1);
// Select template from dom
subLayer.infowindow.set('template', $('#template').html());
});
</script>
Weirdly, I was able to get my infowindow to dynamically get taller without using any script tags. I set the width of the window using the web interface, and then added this to the infowindow custom HTML by clicking the button near the top.
{{mtrsrc}} is a column in my table.
Here's my code:
<div class="cartodb-popup v2 custom_infowindow">
x
<div class="cartodb-popup-content-wrapper">
<div class="row">
<div class="label"></div>
<div class="info">
<img height="300" src="http://pesticideresearch.com/fum/{{mtrsrc}}.png" />
</div>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
In jQuery, I created an HTML table dynamically and at the end, I add a click function to add a class from a loaded external css file. In the Chrome javascript console, I can see the class added correctly but the style (colors) do not change. It's like the stylesheet elements do not exist. I added a body style change just to prove it is in fact loading with the HTML page.
Here is the js function that creates the table:
function processGetCallback(data) {
var tableText;
$('#KenTest').empty();
tableText = "<table cellpadding=2><tr><th>ID</th><th>text</th><th>date</th></tr>";
$.each(data, function(i, DataRow) {
tableText = tableText.concat("<tr><td>" + DataRow.IDCol + "</td><td>" + DataRow.txtCol + "</td><td>" + DataRow.dtCol + "</td></tr>");
});
tableText = tableText.concat("</table>");
$('#KenTest').append(tableText);
$('#KenTest tr').click(function () {
$(this).addClass("hightlight");
});
}
Here is the CSS:
body {
background-color: lightgray;
}
td.highlight {
background-color: red;
color: white;
}
tr.highlight {
background-color: red;
color: white;
}
li.highlight {
background-color: red;
color: white;
}
And here is the HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test of jQuery Ajax</title>
<link href="stylesheet.css" rel="stylesheet" />
</head>
<body>
<h1>jQuery Ajax Test</h1>
<h2>Get Ken Test Data</h2>
<ul id="KenTest">
<li class="highlight">ID: 1, txtCol: xyz, dtCol:1/1/2015</li>
</ul>
<hr>
<button id="btnGetAll" onclick="CallGetAllAjax()">Get All Rows</button><button id="btnGet2" onclick="CallGetTwoAjax()">Get 2 Rows</button>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js\main.js" type="text/javascript"></script>
</body>
</html>
The problem is that the elements to which you are binding the click event handler does not exist in DOM when the handler is registered.
Here's a similar question, and there's a good solution from Prestaul: How do you access newly appended HTML elements in jQuery
Use the click method in its delegated form.
You may rather use the .on() method like
$('#KenTest').on("click", "tr", function () {
$(this).addClass("hightlight");
});
I am not sure how long I stared at this and kept missing the typo :/ The js had the class named "hightlight" and the css had the class named "highlight". Doh!
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
Right now I have two HTML classes and a CSS file. One HTML file is used for writing HTML code and another one is for putting large text/paragraph. Now I want to reference that HTML file (which includes a big paragraph) into my main html file.
How could it be done?
Is it a good practice?
Or is there any alternative way to do that?
The code I wrote:
main.html:
<!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
</style>
</head>
<body>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<p id="paragraph_home">paragraph.</p>
<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
</html>
main_design.css:
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header {
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph_home{
text-align:center;
display:inline-block;
width:300px;
vertical-align:top;
}
#menu_area {
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
display:inline-block;
vertical-align:top;
}
body {
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer {
background-color:blue;
margin:-8px;
border:2px solid red;
text-align:center;
}
#home {
font:bold 20px Tahoma;
text-align:left;
}
#about_me {
font:bold 20px Tahoma;
text-align:left;
}
#gallery {
font:bold 20px Tahoma;
text-align:left;
}
#contact_me {
font:bold 20px Tahoma;
text-align:left;
}
#my_diary {
font:bold 20px Tahoma;
text-align:left;
}
#blog {
font:bold 20px Tahoma;
text-align:left;
}
home.html
<!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.
-->
<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->
<p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
of.......
The villagers were relatively peaceful, almost free from crime
and sadness, besides they were very merciful and happy. The
reason I was born there is long long time ago my father’s
pre-generations were settled in the region. To live for his
own, my father had to move in a new village. Our new home was
just a kilometer away from my grandfather’s place. I came to
hear many legendary tales about that piece of land where our
current home is located. People use to say that there was
jungle and some evil’s residence long time ago. From our
village, some seniors of mine saw some shocking scenery with
monster shape in that bush. By the time my father cut the
jungle to settle residence. My father was a school teacher.
And my mom is a homemaker. I am the fourth child of my parents.
Among five siblings, my only and one sister is the second child.</p>
[NOTE: I want that all of my paragraph or text should appear next to the menu area and below the heading.]
HTML out of the box doesn't support this. You would need to use a dynamic language like PHP or ASP.NET. You would need to store your text in a variable, and call that on your main page. Here is a PHP example of how I accomplished this a while back:
First you would store your paragraph in another PHP file, lets call it paragaph.php.
//paragraph.php
var myParagraph = '<p>your paragraph text here</p>';
Lets call the main file index.php
//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>
//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>
The only catch is you will need something like WAMP installed on your computer to test this because browsers dont support PHP. They needs server side processor to create the HTML for them.
Good luck!
The iframe option works well, but there is a new method (requires a bit of work)
Using web components it would look like this:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
You are going to want to include backwords support via jquery so I'd recommend taking a look at this guys tutorial:
Web Components Tutorial
Good Luck!
Assuming I understood your problem correctly, I see two possible approaches:
client-side: load your "home.html" via an ajax call (downside of this approach is the dependence upon javascript, which the user may have decided to disable)
server-side: different server-side technologies (php, asp.net, etc.) have some sort of include mechanism
I tend to go with the 2nd approach because it doesn't rely on the presence of javascript, but it's your call.
Here's some resources:
jquery ajax | jquery load | php include