I have div
<div id="rotatingText" class="marquee">
</div>
and marquee on that div is initialized on window load
jQuery('.marquee').marquee({
duration: 3000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: false
});
Now i need to change text and css of that div on ajax aftersuccess. I get new text and css properties in that ajax response. With that text and css I invoke following:
function setRotatingTextProperties( value, css, objectId )
{
var object = document.getElementById( objectId );
object.innerHTML = value;
jQuery ( object ).attr( 'style', css );
}
After that marquee stops working.
I think that jQuery marquee sets some style in that div and i override it with:
jQuery ( object ).attr( 'style', css );
if I just add my css to existing with
var currentCss = jQuery ( object ).attr( 'style');
jQuery ( object ).attr( 'style', currentCss + css );
with multiple changes I will end up with huge amount of unusable css. And that css will change regularly ( every fiew seconds )...
Any advice and idea will be much appreciated.
Thx in advance.
Actually I think that your problem is not in your css and:
jQuery ( object ).attr( 'style', css );
In my experience problem with jQuery marquee is in changing of text. so your problem is:
object.innerHTML = value;
Best solution ( If you can change html of that page ) is to add span into it:
<div id="rotatingText" class="marquee">
<span id="rotatingTextSpan"></span>
</div>
And change span text, and style of the div. something like:
function setRotatingTextProperties( value, css )
{
// change span text value
$( '#predefineImageRotatingTextSpan' ).text( value );
// change css value on div
$( '#predefineImageRotatingText' ).attr( 'style', css );
}
If you can't change HTML of that page for any reason you can always insert span value into it on window.load or document.ready, but BEFORE you initialize marquee with something like
$( '#predefineImageRotatingTextSpan' ).html( '<span id="predefineImageRotatingTextSpan"></span>' );
and then use above function.
EDIT:
If you have some predefined text in your div at the beginning just copy its value into that div:
var $object = $( '#predefineImageRotatingTextSpan' )
var initialText = $object.text()
$object.html( '<span id="predefineImageRotatingTextSpan"> ' + initialText + '</span>' );
Related
I'm trying to change style of div #info_frame that contain class nazwa_klasy_display and I can't fix it.
$('.box').mouseenter(function() {
//show up scores
$( this ).children( '.scores' ).css( 'display', 'block' );
nazwa_klasy = $( this ).attr('class').split(' ')[1];
nazwa_klasy_display = nazwa_klasy.split('_')[1];
if ($('#info_frame').has(nazwa_klasy_display))
{
$('#info_frame .'+nazwa_klasy_display).style.display ="block";
}
});
you're mixing jQuery with plain Js:
either you use
/* chain a jQuery method, e.g. show() */
$('#info_frame.'+nazwa_klasy_display).show()
or
/* access to the dom node before using plain js */
$('#info_frame.'+nazwa_klasy_display).get(0).style.display = "block";
If my understanding is correct, you are looking for a <div> that has the id of info_frame and the class of nazwa_klasy_display then you do need to fix your CSS selector. you have a space in there when it shouldn't be.
$('#info_frame.'+nazwa_klasy_display)
the selector #info_frame .[nazwa_klasy_display] will be looking for anything that has the class nazwa_klasy_display that is a descendant of *#info_frame
$("#info_frame").hasClass('.'+nazwa_klasy_display).css('display','block');
try this
Since I believe this question is more pertaining to Javascript then WP I decided to post it on SO.
I am having a little trouble binding the theme customizer live preview javascript to an HTML <img src>- more specifically it is my logo.
Here how the html looks on the page(which is fine and dandy):
<a class="footerlogo" href="#top"><img src="<?php echo mytheme_theme_mod( 'footer_logo' ); ?>" /></a> </div>
Now my problematic part is the JS - Here are my first two attempts. Both not working.
Attempt 1:
/** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
value.bind( function( to ) {
$( '.footerlogo img src' ).html( to );
} );
} );
Attempt 2:
/** Footer logo */
wp.customize( 'mytheme_footer_logo', function( value ) {
value.bind( function( to ) {
var footer = $( '.footerlogo img' );
footer.attr( 'href', to );
} );
} );
Can anyone give me assistance on this?
You need to change the src attribute of the image tag, in jquery you can do this using attr('src',to).
Follow the code above:
wp.customize( 'mytheme_footer_logo', function( value ) {
value.bind( function( to ) {
var footer = $( '.footerlogo img' );
footer.attr( 'src', to );
});
});
I am attempting to create a menu with unique data attributes attached to each navigation item. On click I want that navigation item to find the section with the same attribute and add a class to it. This is the code I am using thus-far (it is part of a much larger script).
var $el = $( '#bl-main' ),
$sections = $el.children( 'section' ),
$navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
$el.addClass( 'bl-expand-item' );
$navItems.find("[data-section='" + current + "']");
$sections.find("[data-section='" + $navItems + "']").addClass( 'expand expand-top' );
} );
This is the script it based off of. http://tympanus.net/Development/FullscreenLayoutPageTransitions/
The idea is to add a separate floating navigation to link to the different sections (instead of the direct click to expand that is current implemented). The current script I added only seems to refresh the page on click. I couldn't get it to work in a fiddle at all so the original script im sure will work. The section pasted about I have added in on my local files.
On the first line, when you try to call for a <section> element, you are missing the jQuery shorthand before the parentheses. That should fix your script.
So it should look like:
var $section = $('section');
That should have you all set to continue!
First off you are missing your $ in the first variable assignment. var $section = $('section')
After that it is difficult to tell what you're trying to do without seeing your markup, but I'll take a stab at it.
It appears that you are trying to filter the $section object by the data-section attribute of the nav > a element. This code should do just that:
var $section = $( 'section' ), $navItems = $( 'nav > a' );
$navItems.on( 'click', function( event ) {
var $navSection = $section.filter("[data-section='" + $( this ).data( 'section' ) + "']");
$navSection.addClass( 'expand expand-top' );
return false;
} );
Notice that we are filtering all of the sections by the value of the clicked anchor's data-section attribute.
If that doesn't help, add your markup so we can see your structure.
Is there any way I can manipulate the tumblr controls? They are quite ugly and gray. I want to know if there is any way to add iframe#tumblr_controls {display:none;} to my CSS and recreate all the controls with the same functionality but with a different look. Tumblr controls (iFrame)
Yes, it's fairly easy to replace all the functionality. As you suggested, you can hide Tumblr's default with:
#tumblr_controls {display:none;}
On index pages, you need Dashboard, Follow, and Email. You can't determine if you need Unfollow, but always showing Follow shouldn't be too bad.
Dashboard URL:
http://www.tumblr.com/dashboard
Follow URL:
http://www.tumblr.com/follow/<blogname>
Email URL:
http://www.tumblr.com/send/<blogname>?redirect_to=http%3A%2F%2F<blogname>.tumblr.com%2F
On permalink pages you also need Reblog and Like. These are a little more difficult but I have a sample here: http://like-button.tumblr.com/
Reblog uses an undocumented variable, {ReblogURL}. You simply make it the the href of a link:
reblog
To add Like functionality, you use the following URL and set it as the src attribute of an invisible <iframe>:
http://www.tumblr.com/<command>/<oauthId>?id=<postId>
<command>: like or unlike
<oauthId>: last eight characters of {ReblogURL}
<postId>: {PostID}
Example:
http://www.tumblr.com/like/fGKvAJgQ?id=16664837215
You need to put both variables, {ReblogURL} and {PostID}, into your {block:Posts} block. Then use script to build the URL and set the src.
$( document ).on( 'click', '.like', function ( event ) {
event.preventDefault();
var command = $( this ).hasClass( 'liked' ) ? 'unlike' : 'like',
post = $( this ).closest( '.post' ),
oauth = post.find( '.reblog' ).attr( 'href' ).slice( -8 ),
id = post.attr( 'id' ),
likeUrl = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
$( '#like-it' ).attr( 'src', likeUrl );
$( this ).toggleClass( 'liked' );
} );
{block:Posts}
<article id="{PostID}">
reblog
like
</article>
{/block:Posts}
<iframe id="like-it"></iframe>
#like-it {
display: none;
}
.liked, .like:hover {
color: red !important;
}
It's different now. Just add
#iframe_controls { display:none; }
To the CSS (inside tag of 'Edit HTML').
I'm pretty new to web development, and am learning as I go along.
I have a PHP file (index.php) with code similar to that below (divs are defined in styles.css):
<div class='imgBox' id='imgBox'>
<form name='graphForm' id='graphForm' method='post' action='/'>
<input type='image' id='clicked' src='" . WebPath. "/images/graph.png' class='clickableImage' />
<input name='x_y' id='x_y' type='hidden'/>
<input name='p_id' id='p_id' type='hidden' value='".$RecordID."'/>
</form>
</div>
I've an external js file (showCoords.js) with the following code:
var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0];
$( 'clickableImage' ).
each(function () {
var pos = $( this ).position(),
top = pos.top,
left = pos.left,
width = $( this ).width(),
height = $( this ).height();
$( this ).
mousemove(function ( e ) {
var x = some_code_here,
y = some_code_here;
$( tooltip ).text( x + ', ' + y ).css({
left: some_code_here,
top: some_code_here
}).show();
}).
mouseleave(function () {
//somestuff;
});
});
I currently have it such that I placed the showCoords.js file in the header file (header.html):
<script type='text/javascript' src="http://blahblah.org/files/showCoords.js"></script>
My understanding is that I felt that this particular js should be loaded after the web page itself is loaded, and will then run automatically on the image in that div. Is this wrong?
Nothing is happening when I load the page, so I'd appreciate any help.
EDIT: In Firebug, I get a "ReferenceError: showCoords is not defined" error. Does this mean that showCoords.js is not even being included in the first place?
You need to wait until the document is ready before you fire all that code, we call it domready or documentready in javascript.
To do this in jQuery use this:
$(function() {
// insert all your code here
});
You also are trying to select an element called clickable image. You probably want to find a class as #oxo has mentioned.
$('.clickableimage') would select <img class="clickabelimage" src="..." />
Your jQuery selector is wrong. Try using $( '.clickableImage' ) and start your debugging from there.
If you are using jQuery, you are using the wrong way of selector.
$( '<div id="tooltip">' ) should be $('#tooltip')
$( 'clickableImage' ) should be $('.clickableImage')