I am new to rails.
I have this simple code:
<h1>Pages#home</h1>
<p>Find <a id="t" rel="tooltip" title="Click me!">me</a> in app/views/pages/home.html.erb</p>
And the pages.js.coffee file:
jQuery ->
$('a#t').tooltip(placement: 'bottom');
The tooltip still pops up at the top of the word.
What am I doing wrong?
Your HTML markup contains an error, look at your links title, it has '>' character which has to be escaped in HTML, use > instead.
The problem is with how you are using options.
Try this instead. Hope it works
$('a#t').tooltip('placement': 'bottom');
Two things:
That should be an object literal in the tooltip() method call.
If you've already activated the tooltip on the element, calling the tooltip() method again will fail to update the options.
Given that, try something like:
if ($('a#t').data('tooltip')) { // check for tooltip data first
$('a#t').data('tooltip').options.placement = 'bottom';
} else {
$('a#t').tooltip({placement: 'bottom'});
}
Disclaimer: I know neither Rails nor CoffeeScript, but I do know the above code works in JS.
Related
I am using the following code in a long script many times:
this.click("<selector>");
But there is one page that doesn't work, and I don't understand why.
The HTML is:
<div class="bottom-row">
<div class="actions-primary">
<button class="add-subscription button middle" id="2">Choose</button>
</div>
</div>
So I am using:
casper.waitUntilVisible('#products_screen',
function success() {
casper.test.pass('Product List Show');
this.echo(this.getHTML('.actions-primary'));
//this.click("button#2.add-subscription.button.middle");
this.click("#2");
},
function fail() {
casper.test.fail('List of Products not showing');
},
50000);
I tried all possible selectors with no luck.
Also, if I try with Resurrectio in Chrome, it doesn't record the click.
Any workaround is welcome.
SOLUTION UPDATE:
this.click('[id="2"]');
I solve it using css selector format:
this.click('[id="2"]');
If an id is a number, you must either escape the number based on the Unicode code point, or use the attribute selector.
Both of the following solutions will work:
this.click('#\\32 '); // Escaped based on Unicode code point
this.click('[id="2"]'); // Attribute selector
Shopify is switching dots in product tags to dashes almost everywhere in urls. Except for when you add a custom filter, it pulls original tags with dots instead of dashes, which results in 404 when filtering after dot containing tag was picked.
I want to use JQ for finding and switching dots to dashes in url right after home url.
Google didn't help much.
So, let's say there is a ul
<ul>
<li><a href="http://www.whatever.com/something/tag.with></a></li>
<ul>
How do i find that "something/tag.with" with a help of jq?
p.s.
If somebody can point me to how i change that dot to a dash- that i'd appreciate it very much. But just finding it will help a lot too.
Thank you!
Edit:
<div class="collection-name">
<i class="check-icon"></i> Wool
</div>
And there is also this piece of jquery
$(document).ready(function(){
$("div.collection-name a").each(function(){
this.href = this.href.replace('yarn/', '');
});
$("div.collection-name a").get(0).pathname.replace('.', '-');
})
I've tried adding another this.href = this.href.replace. Didn't work
Figured href is still rendered as a html://whatever.com and so on, so used it as you see above.
So, yeah... Neither one of these 2 worked
first get the value as TML said and then call string.replace method with a regex pattern
var oldurl = $('ul>li>a').get(0).pathname;
var newurl = oldurl.replace(/./i,"-");
The replace line should work like below as well (not tested though)
var newurl = oldurl.replace('.','-');
Just use a regular jQuery selector to find the desired tag, call get(0) on the result of that selector, and get the property pathname from the returned element. For example, the HTML you provided here has only one tag, so it's pretty trivial to select it:
$('a').get(0).pathname
Obviously, in a more complex document, the jquery selector will be a bit more detailed than $('a').
To change all literal '.' (dots) into '-' (dashes), just use normal JS string replacement:
$("div.collection-name a").get(0).pathname.replace('.', '-') works just fine, as you can see from the example code snippet embedded in this answer; further assistance would require you explaining how what has been provided fails to meet your expectation.
console.log($("div.collection-name a").get(0))
$("#found").text( $("div.collection-name a").get(0).pathname.replace('.', '-') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="collection-name">
<i class="check-icon"></i> Wool
</div>
<div>Found the value: <div id="found"></div></div>
</body>
I'm having problems trying to convert this piece of code from jQuery into pure JavaScript.
I've wrote everything down in a JSFiddle as example.
The script is
$(".button").click(function () {
$pageID = $(this).attr('name');
var htmlString = $('#' + $pageID).html();
$('#1').html(htmlString);
});
$(".button").click(function () {
$(".button").css('background-position', '0px 0px');
$(this).delay(50).css('background-position', '0px -40px');
});
$(document).ready(function () {
$("[name='page1']").trigger('click');
});
For the first block I've used
function changeNavigation(id){
document.getElementById('1').innerHTML=document.getElementById(id).innerHTML;
}
And in each <div id="button"> added onclick="changeNavigation(id);" replacing id with page1 page2 etc for their respective buttons.
Which seems to work fine. The problem is the second block of code.
I tried using
document.getElementById("button").style.background-position="0px -40px";
Changing the class to an id attribute, just to test it, but it doesn't work.
What could be the problem? Is it that pure JS doesn't support background-position?
Also, as last thing, is it possible to use .innerHTML to write JS code?
I've tried using both JS and jQuery to write Scripts and despite both writing the same exact thing, the written code didn't work with .innerHTML.
Try
style.backgroundPosition
instead of
style.background-position
Thanks to Anthony Grist.
You have used class not ID. So It would be something like
document.getElementsByClassName("button")[0].style.backgroundPosition="0px -40px"
The hyphen is not valid in property names in JavaScript. Therefore, the CSS property background-position is called backgroundPosition in JavaScript.
I've a pretty minimalistic site, so I want to add details to it, like a hidden theme switching. But I don't want to tell the user that the theme can be changed, so I want to hide the text.
I've tried this:
var tausta = $(body).css("background-color");
$('.piiloteksti').css("color",tausta);
But it doesn't do anything. What would be the correct approach?
A fiddle.
if($('.piiloteksti').css("color",tausta); is a wrong statement. Thats a syntax error! There shouldn't be any if here.
Either remove if
$('.piiloteksti').css("color",tausta);
or complete the if statement.
if($('.piiloteksti').css("color",tausta)){
// some other code
}
Also $(body) does not refer to anything. Use either $('body') or $(document.body)
I tried to modify CSS, and it works.
// javascript
var tausta = $('body').css("background-color");
if($('.piiloteksti').css("color") == tausta) {
alert(tausta);
}
// css (test)
body{background-color:red;}
.piiloteksti{color:red;}
The syntax of your the if statement was off a little. Also, body must be made a String literal.
var tausta = $("body").css("background-color");
$('.piiloteksti').css("color", tausta);
Example: http://jsfiddle.net/HbAHS/8/
You can hide the element with CSS
.piiloteksti{display:none;} Fiddle
OR if you think that would interfere with your layout then,
.piiloteksti{visibility:hidden;} Fiddle
Or you can just give transparent color to your piiloteksti elements
.piiloteksti{color:transparent;} Fiddle
I am wondering how I would remove the vowels from a word on a button click?
Here is what I am trying to do - http://www.marcia.bnmla.com/~marcia/project0.html
I need to use jQuery to remove the vowels in the second box so it displays only consonants when you click the button. I have it where it displays "MRC" as text when the button is clicked and I need to redo it using string manipulation so I can change the word to anything in my code and it will remove the vowels in that word. I am obviously new at this. Please help me!
Here is my code:
<div id="marcia_box">
<p id="marciatext">marcia</p>
<div id="marcia_boxBtn"><button id="marciaBtn">Marcia</button></div>
</div>
$("#marciaBtn").click(function() {
$("#marcia_box").css("background-color","#999");
$("#marciatext").html('mrc');
});
Do you really need jQuery? What about plain old JavaScript?
"abcdef".replace(/[aeiou]/gi, "") // => "bcdf"
How's that?
jQuery allows you to pass a function to .html, which should return a new HTML string. jQuery will pass the old HTML, so you can do something like this:
$("#marciatext").html(function(i, current) {
return current.replace(/[aeiou]/g, "");
});
demo
This one will help you now and in the future for other transformations
specially for toggling between two array keys
var c=0, text=['marcia', 'mrc'];
$("#marciaBtn").click(function() {
$("#marciatext").html( text[ ++c%2 ] );
});
As shown by Jarrett Meyer, removing the vowels has nothing with the jQuery part. But just to show you how to put it together with jQuery (since you said you is really new in it), here is a sample:
$("#marciatext").text($("#marciatext").text().replace(/[aeiou]/gi, ""));