Link image in panel - wordpress

I have this panel made with yootheme builder. I would like the image to have the link as well as the button. https://www.diningsix.dk/panel-test/
I found this solution on another website but it doesn't seam to work:
<script>
jQuery(function(){
jQuery('.linkpanel .uk-card > .uk-card-body > .readmore').each( function(){
var readmore = jQuery(this);
var href = jQuery(readmore).attr('href');
var link = '';
jQuery(readmore).closest('.uk-card').find('.uk-card-media-top, .el-title, .el-content').wrap(link);
});
});
</script>

This seams to work..
jQuery('body').ready(function(){
jQuery('.uk-card').each(function(){
$card = jQuery(this)
var link = $card.find('.el-link').attr('href')
if(link){
$card.find('.el-image').wrap('<a href=' + link + '></a>')
}
})
})

Related

how to use SAPUI5 library css in window.print?

I have developed the SAPUI5 application which is having a print option.
When I click on print button, I am writing print area content into document and giving print by using window.print();
var printContents = document.getElementById("printArea").innerHTML;
var win = window.open("", "PrintWindow");
win.document.write("<div class='page'>" + printContents + "</div>");
setTimeout(function() {
win.print();
win.stop();
}, 2000);
But the issue is I am missing SAPUI5 default library CSS in my print.
I need SAPUI5 default style sheet in my print,how to fix it?
I also came across same problem.
Please add below code between "var win..." and "win.document.write...".
$.each(document.styleSheets, function(index, oStyleSheet) {
if(oStyleSheet.href){
var link = document.createElement("link");
link.type = oStyleSheet.type;
link.rel = "stylesheet";
link.href = oStyleSheet.href;
//win.document.head.appendChild(link); --> this doesn't work in IE
win.document.getElementsByTagName("head")[0].innerHTML = win.document.getElementsByTagName("head")[0].innerHTML + link.outerHTML;
}
});

Stop loading posts when no more exist

I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.

Jquery Script Tag in Header

I know this is a really basic question, so forgive me. I have a script that works in a jfiddle, but I want to put it in my header and I can't figure out how to call it with a script tag and event handler(?).
Here's the script:
var retrieveValue = function(ev){
var $this = $(this),
val = $this.data('value');
if (val) {
$this.val(val);
}
},
hideValue = function(ev){
var $this = $(this);
$this.data('value', $this.val());
$this.val($this.val().replace(/^\d{5}/, '*****'));
};
$('#field_a7afui').focus(retrieveValue);
$('#field_a7afui').blur(hideValue);
$('#form_hv3hcs').submit(function(ev){
ev.preventDefault();
retrieveValue.call($('#field_a7afui')[0], ev);
alert($('#field_a7afui').val());
hideValue.call($('#field_a7afui')[0], ev);
});
Can someone please tell me what I need to put at the beginning and end of this just to throw it in my Wordpress header and call it a day?
Here's my jfiddle: http://jsfiddle.net/d5KaJ/40/
If that's what you were asking for...
into a script tag like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
jQuery(function( $ ) {
// CODE HERE
} )();
</script>

Thickbox not closing after inserting media in Wordpress

I'm using the Wordpress Thickbox to try and retrun the value of the images that a user wants to select (when they click 'Insert into Post'), but the Thickbox is not closing, just showing as any empty white box.
The field $('#office-image input#image') exists, and Firebug is not reporitng any errors.
I'm not sure why this is not working, so any help is appriciated. Thanks.
window.send_to_editor = function(html){
var image_url = $('img', html).attr('src');
$('#office-image input#image').val(image_url);
tb_remove();
}
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
var fileInput = jQuery(fileInput_id);
if (fileInput) {
fileurl = jQuery('img', html).attr('src');
jQuery(fileInput).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
I am using above script for that and its working fine

Change Background with .css and jCarousel

I try do dynamic gallery with jCarousel and Ajax.
My thumbs are loading from '.txt' file.
I try do something like this: If click the thumb body background are change <--- this action for all thumbs but different backgrounds...
But if I try add dynamic url for differents files, it isin't work, If I change + url + for accurate path it work, all picture loaded this same picture from the path - it is understandable ....
below my code
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="200" height="75" alt="" border="0" class="newbg" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 2,
itemLoadCallback: mycarousel_itemLoadCallback
});
$('.newbg').live("click", function(){
$('body').css('background-image', 'url(' + url + ')');
});
});
anybody has an idea as change this code for correct effects...?
I add something like this:
$('.newbg').livequery("click", function(){
var url = $(this).attr("src").replace("_t", "");
var img = new Image();
img.onload = function() {
};
img.src = url;
$('body').css('background-image', 'url(' + url + ')');
});
And it's work correct, thank...
Question can be close...

Resources