I have been trying to get this text color to be white rather than black so it can be more readable on our site. Unfortunately I have been unsuccessful in changing it. Im not sure what I am missing lol im sure its right in front of me though. I did go through a website to embed this as well.
<div id="medium-widget">
</div>
<script src="https://medium-widget.pixelpoint.io/widget.js">
</script>
<script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/paradigm-fund/c%C3%B8smos-network-proposal-to-add-the-gravity-dex-onto-cosmos-hub-is-live-tendermint-invests-in-c68d8600e35b","postsPerLine":3,"limit":6,"picture":"big","fields":["description","publishAt"],"ratio":"original"}})
</script>
I believe you could just inspect the element and overwrite the CSS like this:
Using color red for example:
.medium-widget-article__description{
color: red !important;
}
<div id="medium-widget">
</div>
<script src="https://medium-widget.pixelpoint.io/widget.js">
</script>
<script>MediumWidget.Init({renderTo: '#medium-widget', params: {"resource":"https://medium.com/paradigm-fund/c%C3%B8smos-network-proposal-to-add-the-gravity-dex-onto-cosmos-hub-is-live-tendermint-invests-in-c68d8600e35b","postsPerLine":3,"limit":6,"picture":"big","fields":["description","publishAt"],"ratio":"original"}})
</script>
Quoted from medium-widget.pixelpoint.io
Customize styles
This widget does not use iframes, which allows you to
override all of the existing styles used by it and make it look
however you like. For example, you could customize the style of the
article title by simply defining css properties for
medium-widget-article__title class.
Related
I am very new to jQuery and not entirely sure what I'm doing. Will try my best to explain the problem I'm facing.
I'm trying to lock some content on a landing page until a user shares the link using FB, Twitter, LinkedIN or G+. The first version of the script I wrote (which worked fine) ran like this:
<head>
<script type="text/javascript">
...
$(document).ready(function()
{
$('.class').click(clearroadblock());
buildroadblock();
}
</script>
<style>
.class
{
[css stuff]
}
</style>
</head>
<body>
<div id="something">
<ul>
<li> Link1 </li>
<li> Link2 </li>
</ul>
</div>
</body>
The problem I'm now facing is changing out this code to replace the list elements with social share buttons. As they are no longer under .class, but classes like fb-share-button and twitter-share-button. Please help me understand what I need to modify to accommodate this? PS: This is not a Wordpress site.
function clearroadblock()
{
$('#roadblockdiv').css('display', 'none');
$('#roadblockBkg').css('display','none');
}
This is the way I'm clearing the overlay once a click is detected, BTW.
Can I wrap the social buttons in divs, assign them IDs and use those IDs to trigger the click like below?
<div id="Button">
Tweet
</div>
$('#Button').click(clearroadblock());
You can have multiple classes on an element by separating them with a space. Try the following:
class="class fb-share-button"
Your jquery will still work off the "class" class. I would recommend you change this name to something more meaningful though. Your css can target the "class" for general styles, but you can also target fb and twitter separately.
Update
I decided to create a quick JSFiddle for this.
Some of the styles etc won't be the same as what you're doing, but the problem is resolved. I've created a div with id main that contains the content that you want to hide. There's an absolutely positioned div over the top of this, this is the roadblock. The javascript is showing the roadblock (assuming that's what you wanted to do with buildroadblock()).
On click of a link in the ul with id socialMedia we call clearroadblock. Notice the lack of parenthesis. This hides the roadblock.
This isn't a great way of preventing someone from seeing information, you might want to think about pulling the content down from the server when the action is performed, however, I think this answers your question.
I'm currently using wow.js in order to fade in content as you scroll down. The way it works is you add the div class wow to something you'd like to fade in, which the wow.js recognizes and then animates. (Really simple documentation here http://mynameismatthieu.com/WOW/docs.html)
However, if the browser has javascript disabled, it fails to recognize any css styling on anything with the class wow, as .wow is not defined in my stylesheet. I'm wondering if there is a workaround to this - should I add the .wow class to my own stylesheet as well, with something like .wow {display: block}? Or is there a way to tell a browser with no javascript enabled to simply ignore the wow class?
Unfortunately I cannot simply put a <noscript>message saying javascript is disabled, as I know many people at work will be viewing the site, where javascript is disabled, and they need to be able to view it.
The common way to do this is the other way around. I'm not sure if the library is limiting, but you can add a class to the <html> or <body> element identifying that JS is available. The way to do that in reverse would be to have a class like .no-js, and then remove it from the <body> if JS can run.
For example
<body class="no-js">
<script type="text/javascript">document.body.className = "";</script>
From there, in your CSS, simply do the following:
.no-js .wow {
display: block;
}
How about you only add the wow class if the browser does have Javascript?
For example:
<div id="one" class="wowable"></div>
<div id="two" class="wowable"></div>
<script type="text/javascript">
var wowables = document.getElementsByClassName('wowable');
for(var i = 0; i < wowables.length; i++) {
wowables[i].classList.remove( 'wowable' );
wowables[i].classList.add( 'wow' );
}
</script>
I have searched a lot and couldn't found the approach to create the small text box right next to the cursor, when doing hover over on HTML object.
Example http://guyzyl.org/wp/Picture1.png
You can see cursor is not visible in this example, but the text box appears on hover over. I would like to create some thing similar.
Example is taken from the Facebook.
Thanks for the help
tooltips can be obtained on tags adding the title attribute to them, e.g.:
my link
fancier looking tooltips can be obtained using javascript but the above is the correct semantic option (many tooltip plugins expect it to be in your code anyway)
Use this :
<img title="my tooltip" src="" alt=""/>
It's called tooltip. write like this for example:
<div class="parent">
<p>create group</p>
<div class="tooltip">tooltip</div>
</div>
CSS
.tooltip{
display:none;
}
.parent:hover .tooltip{display:block;}
Check this http://jsfiddle.net/zDLzF/
There are many fancy tooltips available. The Simplest jQuery Tooltip Ever - http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
I'm trying to use Jquery to firstly identify specific words within a span tag, and then colour the background of a div it is nested in. The HTML looks like this:
<div class="highlight item1 ll3">
<div class="Image">
<h2 class="Name">
<div class="type">
<span>Workshop</span>
</div>
<div class="Dates">
<p class="Desc">Toddlers are especially welcome to BALTIC on Tuesdays. Join
in the fun, as a BALTIC artist leads a practical session using a variety of
materials,...
</p>
So I think I need to use Jquery to identify if equals "Workshop" then color the div with class highlight (for e.g. set background to #000). I need to repeat this so that each div.highlight that has a different value is given a different color.
Thanks so much in advance.
Jason
Something like this should work:
$(document).ready(function(){
$("span:contains('Workshop')").parent().css({ "background-color" : "#f8f8f8" });
});
Check this example if you are looking to add css based on keywords
http://tinkerbin.com/q6GwDrvJ
<script type="text/javascript">
$(document).ready(function(){
$("span:contains(Workshop)").parent().css( "background-color","red" );
});
</script>
Rather than trying to create tons of different pages on my website, I'm trying to update the content of a single div when different items in the navbar are click to update the maint div content. I tried to find a simple example using Javascript:
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
Click me to replace the content in the container.
</a>
This works just fine when I only try and update text, but when I put an img tag in there, as you can see, it stops working.
Either
1) what is the problem with how I am trying to do it?
or 2) What is a better/easier way to do it?
I'm not stuck on Javascript. jQuery would work too, as long as it is just as simple or easy. I want to create a function that will just let me pass in whatever HTML I want to update and insert it into the div tag and take out the 'old' HTML.
You just have some escaping issues:
ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
^ ^
The inner ' need to be escaped, otherwise the JS engine will see ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors resulting from the subsequent 2.jpg'>'). Change the call to (tip of the hat to cHao' answer concerning escaping the < and > in the HTML):
ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>')
A simple way to do this with jQuery would be to add an ID to your link (say, "idOfA"), then use the html() function (this is more cross-platform than using innerHTML):
<script type="text/javascript">
$('#idOfA').click(function() {
$('#example1div').html('<img src="2.jpg">');
});
</script>
First of all, don't put complex JavaScript code in href attributes. It's hard to read or to maintain. Use the <script> tag or put your JavaScript code in a separate file altogether.
Second, use jQuery. JavaScript is a strange beast: the principles underlying its patterns were not designed with modern-day web development in mind. jQuery gives you lots of power without miring you in JavaScript's oddities.
Third, if your goal is to avoid having to endlessly duplicate the same basic structure for all (or many) of your pages, consider using a templating system. Templating systems allow you to plug in specific content into scaffolds containing the common elements of your site. If it sounds complicated, it's because I haven't explained it well. Google it and you'll find lots of great resources.
Relying on JavaScript for navigation means your site won't be indexed properly by search engines and will be completely unusable to someone with JavaScript turned off. It is increasingly common--and acceptable--to rely on JavaScript for basic functionality. But your site should, at minimum, provide discrete pages with sensible and durable URLs.
Now, all that said, let's get to your question. Here's one way of implementing it in jQuery. It's not the snazziest, tightest implementation, but I tried to make something very readable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<style type="text/css" media="all">
/* all content divs should be hidden initially */
.content {
display: none;
}
/* make the navigation bar stand out a little */
#nav {
background: yellow;
padding: 10px;
}
</style>
</head>
<body>
<!-- navigation bar -->
<span id="nav">
about me |
copyright notice |
a story
</span>
<!-- content divs -->
<div class="content" id="about_me">
<p>I'm a <strong>web developer</strong>!</p>
</div>
<div class="content" id="copyright">
<p>This site is in the public domain.</p>
<p>You can do whatever you want with it!</p>
</div>
<div class="content" id="my_story">
<p>Once upon a time...</p>
</div>
<!-- jquery code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
// Wait for the document to load
$(document).ready(function() {
// When one of our nav links is clicked on,
$('#nav a').click(function(e) {
div_to_activate = $(this).attr('href'); // Store its target
$('.content:visible').hide(); // Hide any visible div with the class "content"
$(div_to_activate).show(); // Show the target div
});
});
</script>
</body>
</html>
Ok, hope this helps! If jQuery looks attractive, consider starting with this tutorial.
Your main problem with your example (besides that innerHTML is not always supported) is that < and > can easily break HTML if they're not escaped. Use < and > instead. (Don't worry, they'll be decoded before the JS sees them.) You can use the same trick with quotes (use " instead of " to get around quote issues).