When I click on the post it opens a random post instead of the post I clicked.
The $postid = get_the_ID(); is in the beginning of my code.
Here's the function i use inside the onlick='' that is inside the <a> tag which is around the post image
<script type="text/javascript">
function wholeAd(){
var permalink = '<?php echo get_permalink($postid); ?>';
window.open(permalink, 'newwindow', 'width=900, height=650');
return false;
}
</script>
<div class="ad-box span3">
<a class="ad-image" onclick='wholeAd()'>
For Popup you can use something like this
"<a href='javascript:OpenPopUpPageWithTitle('"+oListItem.get_item('Url').get_url()+"', 'NotificationCallback', "+oListItem.get_item('Width')+", "+oListItem.get_item('Height')+",'" + oListItem.get_item('Title') + "');'> " + oListItem.get_item('Title') + "</a>"
for New Window you can use something like this
<a target='_blank' href='url' style='styles'>Title</a>
Hope this helps, Mark it as answer if it solves your query
Here is the solution:
You don't have to make a function
<a href="<?php the_permalink(); ?>" onclick="window.open(this.href,'newwindow', 'width=900, height=650');return false;">
Related
My heading for WordPress is using the blog name.
I think this is the code in WordPress that displays the header text:
<a id="logo" href="<?php echo home_url(); ?>" <?php echo $logo_class; ?>>
I can change header text using the below CCS code:
header#top #logo {}
I want to change it so text to randomize on hover.
Similar to this http://jsfiddle.net/neeklamy/3eXfk/
Any ideas how?
Thanks in advance.
How about something like this?
var colors = ['#f9c213', '#f35c4a', '#3da1bf', '#827287'];
var originalcolor = $('#logo').css('color');
$('#logo').on('mouseenter', function(){
var col2 = Math.floor(Math.random() * colors.length);
var newcolor = colors[col2];
console.log(newcolor);
$(this).css('color',newcolor);
});
$('#logo').on('mouseleave', function(){
$(this).css('color', originalcolor);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="logo" href="#" class="">Link</a>
How do I get the post id which is passed in permalink. In wordpress, I have seen this:
href="<?php echo get_permalink($post->ID); ?>"
Using JQuery get method I am able to pass href attribute to process in php. The code is:
<script type="text/javascript">
$(document).ready(function(e) {
$('Selector').on('click', function(){
var href = $(this).attr('href');
$.get('url',
{
'post_id' : href
},
function(data){
alert(data);
});
return false;
});
});
</script>
It gives me post permalink as desired, but How do I get $post->ID instead. I have used url_to_postid method after getting the permalink but that's not working, so I want to get $post->ID if that's possible. Thank you for your help
Attach post ID to the link in data attribute:
<a href="<?php echo get_permalink($post->ID); ?>"
data-id="<?php echo htmlspecialchars($post->ID); ?>"
>...</a>
And then retrieve it in jQuery:
var postID = $(this).data('id');
We can open a smoothbox popup from a link with static url like this
<a id ="join-request" href="<?php echo $this->baseUrl() ?>/register/selected_groups/test?>TB_iframe=true" class="smoothbox">
click me
</a>
But how can do it in a button click ?
Chek this demo
If the buttons get different url by php use this:
html
<button class="smoothbox" url="ONE<?php echo $this->baseUrl() ?>/register/selected_groups/test?>TB_iframe=true">Click me - one</button>
<button class="smoothbox" url='TWO<?php echo $this->baseUrl() ?>/register/selected_groups/test?>TB_iframe=true'>Click me - two</button>
script
window.addEvent("domready", function (e) {
document.getElements(".smoothbox").addEvent("click", function (e) {
$('test_result').innerHTML = e.target.innerHTML + '</br >URL is: ' + e.target.getProperty('url');
var url = e.target.getProperty('url');
window.open(url, '_blank'); //or smoothbox
});
});
If the php always gives the same url you can echo it in the script instead of inside the buttons, like
var url ='<?php echo $this->baseUrl() ?>/register/selected_groups/test?>TB_iframe=true'
I have a function in jquery which displays images on link click and also has to hide the image when the link is clicked again.
This is the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.links').click( function(){
var linkclicked = this.id;
var url = $j(this).attr('href'),
image = new Image();
image.src = url;
image.onload = function () {
$j('#image-holder'+linkclicked).empty().append(image);
/* The above line shows the image on first click.
Adding slideToggle hides the image again */
};
image.onerror = function () {
$j('#image-holder'+linkclicked).empty()
.html('That image is not available.');
}
$j('#image-holder'+linkclicked).empty().html('Loading...');
return false;
});
});
function loadnow() {
}
</script>
</head>
<body>
<?php $topicid=1; ?>
<a href="myimages/red-brick-wall-texture.jpg" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
<?php $topicid=2; ?>
<br><a href="/myimages/gymicon.JPG" class="links" id="<?php echo $topicid; ?>" >Show image</a>
<div id="<?php echo 'image-holder'.$topicid; ?>"></div>
</body>
</html>
Please let me know where to write slideToggle as to enable show/hide function properly. There are two links here which show separate images. They are shown when clicked but the problem is to hide them on next click and make them
visible when clicked again and so on.
The way you have your code here is not really quite right for .slideToggle. You should not put the URL for the image in the href attribute of an <a> element because the link will try to go there on click.
The way .slideToggle works is well documented on the docs page. All you have to do is use the HTML <img> tag, which is made to hold images. Then you $().hide(); them when the page loads so they aren't shown. All you have to do them is call the .slideToggle() function on the link click event.
See the working example with some misc pictures in this fiddle: http://jsfiddle.net/8xcZT/5/.
Or here is a working version of your code: http://jsfiddle.net/JMXba/9/. I can see this may be desirable to wait for the click to load the image.
Good Luck!
I am working in php on when user click image when it will redirect to another link then i need change image here is my code
<script type="text/javascript">
$(document).ready(function() {
$("#cards").click(function() {
d = new Date();
$("#cards").attr("src","http://ifliptips.com/admin/VueGuides/images/ifliptips_hover.jpg?timestamp=" + new Date().getTime());
$("#tips").attr("src","http://ifliptips.com/admin/VueGuides/images/iflipcards.jpg");
$("#registeruser").attr("src","http://ifliptips.com/admin/VueGuides/images/reg_users.jpg");
});
});
</script>
<?php
$redirect=REDIRECT;
$path=$redirect."/images/iflipcards.jpg";
?>
<li class="active">
<a href="quizcatagory.php" id="quizcatagory">
<img id="cards" style="padding-top:15px" width=70 height=18 src=<?php echo $path; ?> />
</a>
</li>
How can I change image after page reload?
Thanks in advance.
url = "cardcatagory.php";
$(location).attr('href', url);
The code above redirect your page to another link. Try below.
$(document).ready(function () {
$("#quizcatagory").click(function () {
d = new Date();
$("#cards").attr("src", "http://ifliptips.com/admin/VueGuides/images/ifliptips_hover.jpg?timestamp=" + new Date().getTime());
$("#tips").attr("src", "http://ifliptips.com/admin/VueGuides/images/iflipcards.jpg");
$("#registeruser").attr("src", "http://ifliptips.com/admin/VueGuides/images/reg_users.jpg");
return false;
});
});
You are already setting the image with a PHP variable
<img id="cards" style="padding-top:15px" width=70 height=18 src=<?php echo $path; ?> />
Just change the image on the server side. Unless you are speaking of the image urls in the JavaScript, then you can either make their values PHP variables and set that from the server or you can create a PHP file that returns an image and put all the necessary logic to determine what image to display from there. (http://php.net/manual/en/function.imagejpeg.php)