We Keep Coding

Access elements inside a Layout View

I am currently working on a website which uses MVC model.
I have a Layout page and 4 pages(home,contactus,aboutus,ourwork) which use this Layout. I am having this situation where I want to use the html element defined in layout page in one of the page(ex. home).
use in the sense modify certain property of that element(using javascript).
example:
lets say there is a button defined in layout page and i want to change the display property of the button when some action happens in home page

Yes, it is possible! You have to create a global Javascript file and add that into the layout body and select the element you want, e.g.:
If the element id is readm, put the script into that file:
var readm= $("#readm");
Include the script file src into the layout body, e.g.:
If the filename is accesselement.js:
<script src="accesselement.js">
Use the variable name in your view in which that element is required.
That's it.

Jquery : Adding class to dynamically generated li

i am using lightwidget to embed instagram feed.
When feed is inserted i want to add col-xs-6 class to each li element. i can get li elements by going to inspect element only.
this is the class that i am targeting
<li class="lightwidget__tile">
this is what i wrote
$('li.lightwidget__tile').each(function(){
$(this).addClass('col-xs-6');
})
this one does not add class to li elements ,
can someone help me if i am doing it right
Edit :
This is how code is being inserted
<iframe src="//lightwidget.com/widgets/address.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

What you intend to do is not possible. iframes must abide by Same Origin Policy which means you need to have admin privileges to the website that resides in the iframe, or the site has a service that specifically allows you to access and manipulate the content of the page within the iframe. I took a quick look and didn't find any API documentation so unless you own https://lightwidget.com/ you will not be able to change classes of any element within the iframe.
The reason why you are able to change content inside the iframe with devtools is because that's by design. What you are able to do on an iframe with devtools is because the iframe context is different.
I suggest that you use the LightWidget Builder, it has a setting for columns.
Now if I'm wrong...
...and you actually do own lightwidget.com...
...or these list items are on your website either on the page like normal DOM...
...or on another page on your domain...
...then yes you should have no problem.
I believe option 2 was fully covered and even your original code would've worked. So we can forget about number 2 and let's assume number 1 is not true
...and you actually do own lightwidget.com...
...or these list items are on your website either on the page like normal DOM...
...or on another page on your domain...
Number 3 is very plausible, but a moot point because LightWidget and their services are accessed through their website exclusively.

Try This One
$('li.lightwidget__tile').each(function(){
$(this).append('<div class="col-xs-6"></div>');
})

Try using the arguments passed to each by jQuery:
$('li.lightwidget__tile').each(function(i, e){
// i is a counter of the loop element
$(e).addClass('col-xs-6');
})
As you say, your li is dynamically generated, try to wait a bit for the DOM to be updated, for example using setTimeout :
setTimeout(function(){
$('li.lightwidget__tile').each(function(i, e){
// i is a counter of the loop element
$(e).addClass('col-xs-6');
})
}, 250)
Update
In case you are trying to run jQuery inside iframe element, I recommend you to have a look to this and also this SO questions.

this is FUTURE elements matching the selector
$(document).on("DOMNodeInserted", "#li.lightwidget__tile", function() {
$(this).each(function(){
$(this).append('<div class="col-xs-6"></div>');
})
})
Hope this work.

To achieve this using iFrame, you must be able to apply jQuery to the external web content that is being retrieved via iFrame.
This solution works same as iFrame. I have created a PHP script that can get all the contents from the other website, and most important part is you can easily apply your custom jQuery to that external content. Please refer to the following script that can get all the contents from the other website and then you can apply your cusom jQuery/JS as well. This content can be used anywhere, inside any element or any page.
<div id='myframe'>
<?php
/*
Use below function to display final HTML inside this div
*/
//Display Frame
echo displayFrame();
?>
</div>
<?php
/*
Function to display frame from another domain
*/
function displayFrame()
{
$webUrl = 'http://[external-web-domain.com]/';
//Get HTML from the URL
$content = file_get_contents($webUrl);
//Add custom JS to returned HTML content
$customJS = "
<script>
/* Here I am writing a sample jQuery to hide the navigation menu
You can write your own jQuery for this content
*/
//Hide Navigation bar
jQuery(\".navbar.navbar-default\").hide();
</script>";
//Append Custom JS with HTML
$html = $content . $customJS;
//Return customized HTML
return $html;
}

Reference the same javascript file in SVG image and HTML Page

I have an html page with an svg image embedded on it.
The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.
The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.
What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.
Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.
Any ideas how I can solve this problem?

May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.
The external script you access like this:
window.parent.toggleButton();
Then the button itself could be your "flag", if it is hidden or not.
I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:
function sendClickToParentDocument(evt)
{
// SVGElementInstance objects aren't normal DOM nodes,
// so fetch the corresponding 'use' element instead
var target = evt.target;
if(target.correspondingUseElement)
target = target.correspondingUseElement;
// call a method in the parent document if it exists
if (window.parent.svgElementClicked)
window.parent.svgElementClicked(target);
}
Src: https://stackoverflow.com/a/10516723/2827823

loading specific id content from html in dojo content pane

I am trying to load specific html id content in Dojo content pane on click of a tree node.
I have a long html, which has several headings. I am trying to load content from this html on click on a tree node. I am able to get html loaded, but I am not able to bring content with specific id on top of content pane.
Say my html is abc.html and it has several ids say id1, id2 ...
if I open this html in IE with argument abc.html, page gets loaded, with first line on top. Now if I open it with argument abc.html#id9
This specific section of html get loaded to top of IE window.
I am trying to achieve same effect in dojo content pane - here content is loaded in Dojo ContentPane on click on tree node and goal is load specific #id associated with that tree node in content pane, instead of loading top of html.
It never loads specific id content on top of content pane. It always load as if argument is abc.html. I do not see any effect of abc.html#id9
below is code snippet on how I am creating content pane and loading content on click on tree node.
....
var CenterPane = new ContentPane({//content pane at center for loading urls of selected designs
content:"Click to get the details about node",
region:"center"});
bordContainer.addChild(CenterPane);//add content pane to the border container
....
....
var fileTree = new Tree ({
model: treeModel,
showRoot: false,
openOnClick:true,
autoExpand:false,
_createTreeNode: function (args)
{
return new MyTreeNode(args);
},
onClick: function(args) {
CenterPane.set("href", vHtmlPath); }
....
vHtmlPath is dynamically set to abc.html#id9 or abc.html#id1 ....

ContentPane does not load into an iframe. If you want to move, you have to change the current page url.
For instance
CenterPane.set("href", vHtmlPath).then(function() {
document.location.href = "#id9"
}

How to load and analyze page in background without loading images/scripts?

What's the best way to get usable DOM for an AJAX-requested page without loading any related images/scripts/etc?
Backstory:
I want to load a page in background, then perform a sort of data-mining on it (this is a browser extension, so I can't control the pages themselves). I do not want to spend time loading images and running scripts on the background page, since it is only page contents I need.

load data via ajax
strip all the tags containing src and href attributes, or simply change the value of those attributes with data:null. If data also contains inline style you should remove all statements containing a reference to external resources (e.g. background and border images, .htc components, xul bindings, .ico cursor)
append filtered data to the DOM and analyze it
step 2 could be achieved through a regular expression in javascript. e.g.
/* here we are in the ajax "success" callback */
...
data = data.replace(/(src|href|style)=['"]([^'"]+?)['"]/gi,
function(match, attribute) {
return (attribute.toLowerCase() === 'style')
? attribute + '=""' /* remove all inline style */
: attribute + '="data:null"'; /* href and src set to data:null */
})
/* append filtered data */
$(data).appendTo($('body_or_other_element'))

If possible, use jQuery, as I mentioned above. It makes it easy to select portions of the page DOM as needed.
Here are some examples:
You can grab tags href attribute like this: $("a", $(ajax_response)).attr("href");
Title's contents: $("title", $(ajax_response)).html();
You might have to test out the selectors to see which work best, but, I think this would be an easy way of going about this.