I want to access current position that defined in variables. After that I want to make the element of that position was colored automatically when I load the page. The problem is I don't know how to access that defined position and append the color to html when its load.
I've try it in this, but it gets nothing colored when I load the page. Maybe my code was wrong and can anyone help?
https://jsfiddle.net/ax47kvu5/1/
var gigi = "P15";//id of g
var posisi = "C";//id of polygon
var kondisi = "amf";
if(kondisi=="amf"){
var group = $('polygon').parentNode().attr(gigi);
group.attr(posisi).css({fill: "#333333"});
$('polygon').html('XX');
}
https://jsfiddle.net/9n9jack8/ - In your example you didn't load jQuery, this is the first issue.$("#P15").find("#C").css({fill: "#333333"});
Related
I have a book type project. I have functions that all users to add annotations to pages, and if necessary drag and drop to make adjustments in their position. The d & d is working successfully. I have a mouseup event bound to the drag div to capture the new location such as left , top etc...
This works fine, later I trigger a function to index all the divs (annotations) present on the page based on class "rect"
$.each('.rect',function(){
addToIndex(this)
})
I store all the div properties in an index so they can be recreated when the user returns to the page. This works fine if the div has not been dragged. All properties are correct and can be recreated on the page later.
However if the div has been dragged the div still retains the original properties not the new dragged-to location.
For some reason the dragged div is not being updated in the DOM.
I can trace the properties for the div after dropping and they are updated
otherwise the div would not be displayed where it was dropped.
How can I force the dropped object to be updated in the DOM using jQuery ?
Do I have to work directly in the DOM in this case instead of jQuery ?
Okay here is more detail
Once the drag object is dropped I capture position and then want to add this as data to the element...snippet here
// capturing the literal position of element after dragging
var lx = $(obj).position().left - offPos.left
var uy = $(obj).position().top
var ux = $(obj).position().left - offPos.left + $(obj).width()
var ly = $(obj).position().top + $(obj).height()
var rb = new Array(lx,uy,ux-lx,ly-uy)
var rbstr = rb.join(",")
// before dragging rbstr value is 593,31,135,40
console.log(rbstr) // outputs 948,13,135,40
//updating the element with new data here
$(obj).attr("data-rb",rbstr)
console.log(rbstr) // outputs 948,13,135,40 which is correct
// everything here indicates the element has been updated
But when I try to read all the elements with the same class to store their properties the updated element's properties are not updated but just as they where before the drag and drop.
$.each('.rect',function(){
var allData = $(this).data()
console.log($(this).data())
// is correct for all elements except the dragged element
pageAnnots[thisDoc.currentPage].push(allData)
})
Hope this gives more detail about the problem.Note I can resize the 'rect' and the data gets updated just fine.
Seems to me when the 'rect' is dropped it is a proxy, and updating the data is not happening on the original dragged 'rect'
UPDATE: I found the problem - I was assigning data using
$(this).attr('data-x',n)
but then retrieving the data using
$(this)data()
Apparently if you assign data using 'attr' you have to likewise retrieve it using the same 'attr' method
HTML
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<input type="Button" name="" value="nextPage" id="next">
</body>
jQuery
$(function() {
$("#draggable").draggable();
$("#next").on("click",function() {
var top = $("#draggable").css("top");
var bottom = $("#draggable").css("bottom");
var left = $("#draggable").css("left");
var right = $("#draggable").css("right");
//send them to next page
});
});
Hope this was what you wanted. The dragable function adds a style attribute to div, if that was what you meant by update DOM.
I have a things inspector and this things inspector has two titles. I wan to be able to change the css on this titles and make their font size a bit smaller( default fontSize is 16px and I want to drop it to 12px). I tried to get these titles class and use this method to change their size:
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
it does work and I can see the change but as soon as the page finishes loading ( page loading takes couple of second because it needs to read a json object) title sizes go back to its default.
I dont even know this is a right way to access DOM elements and change their CSS.
Please point me to the right direction of how to change DOM object css in SAPUI5 in general
You could create a new CSS file which you include in your index.html.
Just add the needed selectors with the modified attributes in this custom CSS:
.sapUiUx3TVTitleSecond, .sapUiUx3TVTitleFirst {
font-size : 12px;
}
Edit: if you need to change it programmatically, you could use the addStyleClass("yourStyle") method which is available to every UI element
Execute the script after dom gets completely loaded. Try like this
$("document").ready(function()
{
var element = document
.getElementsByClassName("sapUiUx3TVTitleSecond")[1];
element.style.fontSize = '12px';
var element = document
.getElementsByClassName("sapUiUx3TVTitleFirst")[1];
element.style.fontSize = '12px';
})
$("document").ready(function()
{
$(".sapUiUx3TVTitleSecond").css("font-size","12px");
})
What is the correct way to load an SVG file into a specific div using SnapSVG?
Following the documentation I have this JS:
var s = Snap();
Snap.load("fox.svg", function (f) {
s.append(f.select("g#fox"));
});
This loads the SVG just above the body tag, however if I try to set it's location, nothing happens, there is no error. This is what I have attempted so far:
var s = Snap('#myDiv');
Where am I going wrong?
This should work, its not far removed from your example, so its hard to tell whats wrong with yours without a live example and the svg to look at.
If you want to upload a fiddle or something, it may help.
var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: Just to extend on Duopixels answer, the element you are trying to add, should be an svg element (ie
<svg id="mysvgtoload">...</svg> // you can add an svg to a div
<g id="mygrouptoload">...</g> // you can't add this to a div, but could to an svg element
in the file) or add the element (g or path or whatever) to an existing svg tag/element in your html. I suspect you may be trying to add a element direct to a div, which won't work, but its hard to tell without the file.
Also double check that Snap is loaded fine, and you can do a console.log( data ) in the function to check that it has loaded the markup correct.
I am using the Snowstorm.js javascript file with my webpage.
Current the source allows you to change the character which a 'snowflake' is displayed as. However, I would like to be able change the property of he snowflake to be the image of a snowflake which I have created.
You are able to edit the source and this is the line which sets the character to be displayed.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
Is there any way I can change this to display an image instead of a character and if so, how is this done? I have never worked with Javascript before so for any help or pointers I would be very greatful.
It looks like Snowstorm.js might have the functionality to do this already. Have you seen the information posted at http://www.bozo.us/Javascript/snowstorm/? This page suggests:
File Structure
The script looks for snow images under ./image/snow/ by
default as shown below. If desired, this can be changed in the
user-configurable section.
This seems to correspond to an update mentioned at the bottom of the page you linked, where it says:
1.2.20041121a
Script moved into one file (snowstorm.js) for simplicity
addEventHandler and PNG support functions updated
There's probably a ton of hacky ways to do this in JavaScript, but maybe this will lead you to a clean solution. Good luck!
Find these lines
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.cursor = 'default';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
The "o" here is your div element. You can add it a class by adding this line:
this.o.className = "myClass";
To remove the character remove this line:
this.o.innerHTML = storm.snowCharacter;
Than you can style the snowflake with css, the way you know it. Just give it a background image. You can also remove the lines that set the color, width and height and style them with css.
Use unicode '❄' instead of '•' in the original line like this:
this.snowCharacter = '❄';
this will output the snowflake '❄' character as above instead of bullet point.
you might also have to increase these values to 16 or so:
this.flakeWidth = 8;
this.flakeHeight = 8;
I'm working on a script where I take a business card design and use it to generate a sheet of paper that has ten cards on it to match a template to print temporary cards. The tricky part here is the bleeds; they'll overlap down the middle so I need to make clipping masks for each one.
I came up with a system where I made the frames that would become the clipping masks, duplicated and moved the cards where they need to go, and then more or less did the following:
dupCard[i].select();
app.cut();
frameGroupFront[i].select();
app.pasteInto();
This works great. But because it's a little resource-intensive, I tried to hide the working file upon creation and use workingFile.windows.add(); at the end as I've done in the past. But when there's no window, select() doesn't work! I get error 90886 stating that "No document windows are open."
How can I select the items I want so that I can cut and paste it without having a visible window? If not possible, is there an alternate solution to the problem?
EDIT:
I was asked to provide a scripting sample, so here's the most basic sample I can furnish:
var newPage = app.documents.add();
var myRectangle = newPage.rectangles.add({geometricBounds:[1, 1, 5, 5]});
var myRectangle2 = newPage.rectangles.add({geometricBounds:[1, 1, 3, 3]});
myRectangle.select();
app.cut();
myRectangle2.select();
app.pasteInto();
This script works. But, take the first line and do app.documents.add(false) instead, and it doesn't work because no document window is open. In this example, I'd like to be able to get the one rectangle inside the other with no window visible.
Instead of using copy and paste, you can manipulate the rectangle objects themselves like this:
var doc = app.documents.add(); // Add a new doc
var page = doc.pages[0]; // Get the first page
var rect = page.rectangles.add({geometricBounds:[30,30,6,6]}) // Make a new rect
var rect2 = rect.rectangles.add({geometricBounds:[20,20,6,6]}); // Add a new rect inside
This can all be done without the window being open since you're manipulating the objects directly. Hope this helps!