I upgraded to the latest version of JsViews and it seems like something broke.
If I have a data-link like "visible{:property}", it works.
If I have a data-link like "visible{convert:property}", it does not work.
From what I can tell it seems like it looks early on in the process for the attr "visible" and changes it to "css-display". When I have a converter, though, in propertyChangeHandler it does this line
attr = linkCtx.attr || attr; // linkCtx.attr may have been set to tag.attr during tag instantiation in renderTag
That causes it to change attr back to "visible", and then in updateContent, the regex test for "css-" fails and it never sets the display property.
Am I missing something? Shouldn't this work?
I created a fiddle that shows what I am trying to do. In the non-working case, instead of setting display:none, it sets visible="false"
http://jsfiddle.net/4scbgjpx/2/
<script id="worksTempl" type="text/x-jsrender">
<div data-link="visible{:show}">
<span data-link="name"></span>
</div>
</script>
<script id="failsTempl" type="text/x-jsrender">
<div data-link="visible{negate:show}">
<span data-link="name"></span>
</div>
</script>
$.views.converters({
"negate": function (val) { return !val; }
});
Yes, you are right - that was a bug. It has been fixed now (commit 58), and your jsfiddle now works correctly.
Related
I know I'm probably missing something simple but:
var GAME_CANVAS_ELEMENT = $("<canvas id='Project-001-Canvas' class='Project-001-CSS'></canvas>");
GAME_CANVAS_ELEMENT.appendTo($('.a'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a"></div>
This works if I appendTo('body') but if I attempt to append to anything else it doesn't seem to work.
I'm wrapping your code inside $(document).ready(function(){}) and with chrome it works: http://jsfiddle.net/o2gxgz9r/3701/
You can verify it by inspecting your html code with Chrome developer tool
Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.
I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?
This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>
You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/
i have a html of this format.
<html>
<head>
...
</head>
<body>
<label id='view' onClick="ShowMe()">show my name</label>
<img src="home.jpg" width="800px" height="600px"/>
<div id='name' style="display:none;height:200px">Your Name is DARSHAN</div>
</body>
</html>
and in javascript i have this function
ShowMe()
{
var nameDiv=Ext.get('name');
var viewDiv=Ext.get('view');
nameDiv.setStyle('display','block');
nameDiv.anchorTo(viewDiv,"tr-br?");
}
this thing works fine in all browsers but in IE,When i Click on 'Show My name' label,its displays the 'name' tag near the show my name but also a vertical space is taken up by 'name' Div tag and a scroll bar appears. How to get rid of it?
How can this work? There are lots of errors in this code:
There should be a semicolon in your style attribute value, not a comma:
<div id='name' style="display:none;height:200px">
There is a typo - display is called dispaly:
nameDiv.setStyle('display','block');
Also, what are the setStyle and anchorTo functions? What library are they from? Did you write it yourself? Please provide some more information.
EDIT: Thank you PPvG for adding tag extjs
Please provide snippets of the actual working/faulty code (copy and paste) instead of manually writing new code.
The inline style on are divided by a ","
That's invalid, CSS rules have to end with a semicolon ";"
IE is pretty picky when it comes to valid html/css
After discussing it with one of the experts at office i got to know this.
when you define Div at one place and anchorTo somewhere else this problem might come. how the anchor tag works is it will take the coordinates of the div to which we r anchoring and define the top and left of the new tag accordingly. So we need to make sure that we have defined 'poistion' attribute value to 'absolute'.
So to my problem solution was adding
<div id='name' style="display:none;height:200px;position:absolute">Your Name is DARSHAN</div>
I'm beginner in JQuery, how could I select an object using JQuery ?
This is the code:
<script type="text/javascript" language="javascript">
function Hide(senderID) {
$("#" + senderID).hide(200);
// this exception is thrown // Microsoft JScript runtime error: Object expected
}
</script>
<div id="div1" onclick="javascript:Hide(this.id)"
Any help!
Don't:
get an id from an element
pass that id to a function
use the id to get the element.
Do: Just pass the element.
Don't stick javascript: at the front of an intrinsic event attribute, it doesn't mean what you think it means.
Don't use intrinsic event attributes for that matter (although I didn't fix this in this example). Use unobtrusive JS.
Avoid triggering events based on clicks on a div. This can't be targeted with a focus based navigation device (such as using the tab key on the keyboard and numerous devices used by people with disabilities) without using new features introduced in HTML 5 that don't see widespread support yet. Use an element that is designed as an interaction control (such as a button). (Also not fixed in the example below)
Example:
function Hide(sender) {
$(sender).hide(200);
}
<div id="div1" onclick="Hide(this)"
Code is exactly the same as yours, I added the correct tags, and the call to include the jquery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
function Hide(senderID) {
$("#" + senderID).hide();
}
</script>
<div id="div1" onclick="javascript:Hide(this.id)">Click Me</div>
function Hide(sender) {
$(sender).hide(200);
}
<div id="div1" onclick="javascript:Hide(this)"></div>
hope it helps
I can't resist. Why not use jQuery's full power?
HTML:
<div class="hideable-div">Click me and get rid of me.</div>
jQuery:
$('.hideable-div').click(function () {
$(this).hide(200);
});
you misplaced those "" in
<div id="div1" class=""hideable-div>Click me and get rid of me.</div>
Should be like
<div id="div1" class="hideable-div">Click me and get rid of me.</div>