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>
Related
I am trying to randomly position thumbnail images on wordpress. The images should not overlap. Also, the z-index in not really working (the images should go behind all other elements).
The content is dynamically generated through a php document.
I am trying to avoid plugins so I am doing it like this:
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
$( document ).ready(function() {
$('.js-container a').each(function() {
var height = window.innerHeight/2;
var width = window.innerWidth/2;
//This var top should provide a scroll so that the user gradually finds the images
var top = Math.floor(Math.random() * (($(window).height() * 3) - height));
var left = Math.floor(Math.random() * 55);
$(this).css({
"z-index":"-999",
"top": top,
//this margin-bottom is there to allow some space after the last image so that the user can scroll it
"margin-bottom":"30" + "vh",
"left": left + "vw",
"position":"absolute",
"display":"block",
});
});
});
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
Would you be able to light my way?
Here is the page: http://dev.visualvisual.com/works/
This does the job better but Z-index is still not working.
<?php if ( has_post_thumbnail() ) : ?><div class="js-container bottomdrag">
<script type="text/javascript">
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomMargin(){
$('.attachment-post-thumbnail').each(function(){
randomizeObject(this);
});
}
function randomizeObject(el){
var randomnumber1=Math.floor(Math.random()*70);
console.log(randomnumber1);
var randomnumber2=Math.floor(Math.random()*50);
console.log(randomnumber2);
$(el).css({"margin-top": randomnumber1+"vh", "margin-left": randomnumber2+"vw", "z-index":"-999"});
}
randomMargin();
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?></div> <!--end of js-container-->
</a>
<?php endif; ?>
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 have grid and print icon..if i click print icon i should print the grid.but grid lines are not showing in the printout.
What should i do?
Here is my code
<div style="float: right" id="hide_div"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div class="clear10"></div>
<div class="pnlMainHeader" id="pnlMainHeader" style="display: none; ">
//some xyz code
</div>
<div class="clear10"></div>
<div id="div_print">
//grid code
<?=$this->TemplateRoles?>
</div>
and onclick printPage code in .js file
function printPage(printpage1, printpage2)
{
var hideDiv = document.getElementById('hide_div')
hideDiv.style.display = 'none';
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr1 = document.getElementById(printpage1).innerHTML;
var newstr2 = document.getElementById(printpage2).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr1+newstr2+footstr;
window.print();
document.body.innerHTML = oldstr;
location.reload();
return false;
}
please help me..
What if you were to add another css file to the header that will force the borders to print? Something like this...
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Then inside the file, you can use that class or selector with something like this:
.gridClass /*(or "td" or whatever it is called)*/ { border:1px solid #000;}
Whatever is named in the print.css will only appear when printed because you specify the medium. I hope that helps.
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.
I'm reading up all I can on jQuery, but this week I like(need) to finish a website and I could find a solution to this problem in the last eight hours.
Setting
I'm using a ajaxed wp theme which I'm customising to my own liking.
Problem
I've wrote a simple function to change the header image and the header text when you click on the main navigation links.
The function does work in the header.php but doesn't work in a custom front page (main_navp.php) I've included in index.php.
On navp.php there's an image when onclicked should do the same changes as a click on the nav bar.
index.php
<?php get_header(); ?>
<div id="main-content"><div id="inside">
<?php get_template_part('main_navp'); ?>
<?php if// HERE IS THE WP LOOP (not used so left out) //?>
<div class="pagination">
<span class="older"><?php next_posts_link('« Older Entries') ?></span>
<span class="newer"><?php previous_posts_link('Newer Entries »') ?></span>
</div>``
<?php else : ?>
<h1>no posts...</h1>
<?php endif; ?>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The function is included in the header.php in the ..head>
<script type="text/javascript">
$(document).ready(function()
{
$("a[title='Gigs']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/gig_header_flip.png)");
$("a#nav_text").html("Gigs");
});
$("a[title='Bio']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/play_header.png)");
$("a#nav_text").html("Biography");
});
$("a[title='Gitaarles']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
$("li[id='homew']").click(function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/header_arty.png)");
$("a#nav_text").html("Home");
});
});
</script>
In the main_navp.php (included in index.php afther the header.php) the function does not work on this item. But it should be triggered by $("p[id='les_mp']").live("click", function() as seen above.
<div id="boxred_b">
<div class=head_box><a>Gitaarles</a></div>
<p class="homeles" id="les_mp">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/les_mp.jpg" />
</p>
The main jquery is caled in the header.php
<script src='<?php bloginfo('template_directory'); ?>/js/jjquery-1.5.2.min.js'></script>
In the footer.php are all of the rest of the jquery functions.
<!-- http://benalman.com/projects/jquery-urlinternal-plugin/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.ba-urlinternal.min.js'></script>
<!-- http://www.asual.com/jquery/address/ -->
<script src='<?php bloginfo('template_directory'); ?>/js/jquery.address-1.3.2.min.js'></script>
<script>
// Original JavaScript by Chris Coyier
// Updated October 2010 by Stewart Heckenberg & Chris Coyier
$(".home li.home").removeClass("home").addClass("current_page_item");
$("#column-wrap").append("<img src='<?php bloginfo('template_directory'); ?>/images/ajax-loader.png' id='ajax-loader' />");
$("#s").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
}
});
if ($(".widget_categories li").length%2 != 0) {
$(".widget_categories ul").append("<li><a> </a></li>");
}
if ($(".widget_tag_cloud a").length%2 != 0) {
$(".widget_tag_cloud").append("<a> </a>");
}
// The reason this JavaScript is in footer.php instead of its own file is basically the next line.
var base = '<?php bloginfo('url'); ?>',
$mainContent = $("#main-content"),
$ajaxSpinner = $("#ajax-loader"),
$searchInput = $("#s"),
$allLinks = $("a"),
$el;
$('a:urlInternal').live('click', function(e) {
$el = $(this);
if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {
var path = $(this).attr('href').replace(base, '');
$.address.value(path);
$(".current_page_item").removeClass("current_page_item");
$allLinks.removeClass("current_link");
$el.addClass("current_link").parent().addClass("current_page_item");
return false;
}
// Default action (go to link) prevented for comment-related links (which use onclick attributes)
e.preventDefault();
});
$('#searchform').submit(function() {
var s = $searchInput.val();
if (s) {
var query = '/?s=' + s;
$.address.value(query);
}
return false;
});
$.address.change(function(event) {
if (event.value) {
$ajaxSpinner.fadeIn();
$mainContent
.empty()
.load(base + event.value + ' #inside', function() {
$ajaxSpinner.fadeOut();
$mainContent.fadeIn();
});
}
var current = location.protocol + '//' + location.hostname + location.pathname;
if (base + '/' != current) {
var diff = current.replace(base);
location = base + '/#' + diff;
}
});
</script>
</div>
I've tried to keep things as short as possible. If you like any more information please ask.
-update
using the live function in the header doesn't seem to solve the problem.
I'm using XAMPP to run the website locally. If it helps I could make an online wp installation or could provide the webside (html/java) source.
Because you are Ajax-ing your page, the events are not subscribed to your new elements. Try using the .live() command.
Also, is this ok?
$("p[id='les_mp']").click(, function()...
Don't know for sure about that comma.
I've tried using the live function in the code like this.
$("p[id='les_mp']").live("click", function()
{
$("#main_logo").css("background-image","url(<?php bloginfo('stylesheet_directory'); ?>/images/header/les_header.png)");
$("a#nav_text").html("Gitaarles");
});
in the
$(document).ready(function()
{ .... }
in header.php
Still it doesn't work when be onclicked in main_nav.php
When I put the code out of the main_nav in to the header.php
it works.
You may want to use the method in the link below to refactor the ajax stuff to a separate file. Not sure if it helps with the original problem, but i've seen things work after doing that http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/#js-global
basically you get your url into a variable that is being printed and your scripts have access to using wp_localize_script