I recently installed a tumblr theme but for some reason the reblog button does not work (doesn't do anything on click). Even though the like button works, this one seems to not do anything.
Looking through the code, this is what I see:
<div class="metaitemleft topspace" {ReblogButton size="16"}</div>
and
{block:RebloggedFrom}
<div class="reblogged metaitemleft">
<h6>Reblogged from </h6><h6>{ReblogParentName}</h6>
</div>
{/block:RebloggedFrom}
Any help would be appreciated!
You need the template variable on its own, it can't be used as part of the markup for the div:
<div class="metaitemleft topspace"> {ReblogButton size="16"} </div>
Or just:
{ReblogButton size="16!}
Related
I am trying to use Sidr (berriart.com/sidr) slide panel and everything works but on smartphone the opening and closing animation is not smooth, moving with jerks. Is there a solution to make the animation smooth?
<div class="app">
<span id="menu-badge" class="dx-badge" style="display:none;"></span>
<div id="sidr">
<dx-list
#notificationsList
[dataSource]="menu.items"
[pullRefreshEnabled]="false"
(onItemClick)="menu.itemClick($event)">
<div *dxTemplate="let item of 'item'" class="slideout-menu">
<fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
<i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i> {{item.text}}
</div>
</dx-list>
</div>
<dx-toolbar
*ngIf="authorized && loaded"
#appToolbar id="appToolbar"
[dataSource]="menu.toolbarItems"
(onInitialized)="onToolbarInitialized($event)">
<div *dxTemplate="let data of 'title'">
<div class="app-header">{{menu.appHeaderText}}</div>
</div>
</dx-toolbar>
<router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>
and in .ts file:
$(document).ready(function() {
$('#simple-menu').sidr();
});
One possible issue could be that there are too many change detection cycles going on. A pc can handle this, a phone not so much. Try rewriting your app so it can work with the ChangeDetectionStrategy.OnPush.
Either way, it's worth running a profiler using the chrome devtools, while opening and closing. With a little digging, you can find out what part of code is using up the resources. It could as well be an *ngFor that needs a trackBy because it keeps creating elements.
This question cannot really be answered by just the code you gave, and needs proper investigation on your hand. On the other hand, to use jQuery in combination with Angular is frowned upon, but let's not open that can of worms :)
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 have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>
Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.
I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {
I am working on a youtube search engine. Everything works okay on the back end but I have hit a wall because Youtube adds a div like so:
<div class="item">
</div>
Around the video and removes my div. I have no way of pin pointing why this happens but I have read from other threads that this is not the first time someone has encountered a problem like this.
It would be much appreciated if you could help out!!
make another div - a 'victim' which the YT script would 'eat' and would leave what you need. For example, now you have:
<div id='pagewrapper'>
<div id='DivForYouTube'>
</div>
</div>
let's say you need to save 'DivForYouTube' and now YouTube destroys it and sets its own.
So my idea would be to create another (victim) div, which YouTube would eat and the neede one - would rest.
<div id='pagewrapper'>
<div id='DivForYouTube'>
<div id='specialVictimDivWhereYouSetYouTube'>
</div>
</div>
</div>
What whould you say?