Dynamically adding data toggle and data target in li using jquery - wordpress

I am building the theme in word press and i want my modal to link to the menu links. I am trying to add data-toggle in Li using j query but no result is occurring.
<script type="text/JavaScript">
j Query("#menu-item-135").add("data-toggle", modal);
});
</script>

Use this code it will add attributes in your menu
<script type="text/JavaScript">
$(document).ready(function(){
$("#menu-item-69").attr("data-toggle",'modal');
});
</script>

Related

Is it possible to make GTM Custom HTML tag not to insert new <script/> tags into the DOM?

There is a Single Page App with Facebook Pixel integrated via Google Tag Manager as Custom HTML tag.
<script>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
})()
</script>
This tag is firing on every history change. And on every history change new
<script type="text/javascript" id="">fbq(google_tag_manager["GTM-XXXXXXX"].macro('gtm22'),google_tag_manager["GTM-XXXXXXX"].macro('gtm23'));</script>
is inserted into the DOM.
multiple script tags added to the page
The only way I found just remove executed script tags.
<script id='facebook-pixel-hit'>
(function() {
fbq({{Facebook Pixel Track Type}}, {{Facebook Pixel Event Name}});
setTimeout(function() {
var scriptTag = document.getElementById('facebook-pixel-hit')
if (scriptTag)
scriptTag.remove()
}, 500);
})()
</script>
but it doesn't look like a good solution.
Are there any ways to avoid adding multiple tags into the DOM?

nicescroll() not working with autogenerated div

I am using nicescroll library js because i want to make my div scroll nice rather than default scroll.
I want to make scroll to markerlist ul which is generated by javascript.
I have added nicescroll javascript library like this:
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
and function like this:
<script type="text/javascript">
$(function() {
$("#markerlist").niceScroll();
});
</script>
Maybe you can set a timeout before applying nicescroll. When All contents are loaded then apply nicescroll. Or if you are using a div which shows after clicking a button you can put the code in your click handler function.
$(window).on('load', function() {
window.setTimeout(function() {
$("#markerlist").niceScroll();
}, 200);
});

How to convert this onclick() function to onload() [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make onclick automatically through onload function
So I have the following function which is being called when I click a button.
Here is the code:
<a href="#" role="button" onClick="myFunction('parameter')">
How can I call this function as soon as page is loaded?
I tried onLoad function but doesn't seem to work.
There are multiple options for onload event.
In HTML
<body onload="myFunction('parameter')">
In Javascript
window.onload=function(){
myFunction('parameter');
};
In JQuery
$(document).ready(function(){
myFunction('parameter');
});
Put this anywhere on your page, preferably in the <head>
<script type="text/javascript">
$(function() {
myFunction('parameter');
});
</script>
See https://stackoverflow.com/a/7911809/584192 for more ways of doing it via jQuery.
Have you tried this:
window.onload = function(){
myFunction('parameter');
}
See more at: https://developer.mozilla.org/en-US/docs/DOM/window.onload
You call in myFunction document.ready or just before closing of body tag.
Within document.ready
Live Demo
<script type="text/javascript">
$(document).ready(function(){
myFunction('parameter');
});
</script>
Before closing body tag
<script type="text/javascript">
myFunction('parameter');
</script>
You can use the following code.
<script>
onload = function(){
myFunction('parameter');
}
</script>

CKEditor and CakePHP change height

I am developing with CakePHP and want to modify height of CKEditor generated with cake html helper, because I need to have two editors inside one page, with different height.
How I can do this with css?
if I remember that you can do when you define ckeditor js in your view e.g.
ed = CKEDITOR.replace("textarea",
{
height:"291", width:"400"
});
check this documentation:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.width
http://cksource.com/forums/viewtopic.php?t=13810
Regards.
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'350px'});
</script>
or
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'100%'});
</script>

onclick html images for partial page refresh java script

I have an html image, and I am trying to figure out if it is possible to do a partial page refresh when someone clicks on the image. I was thinking I would use a javascript. I am using aspx, and mvc model
Here is my thought
<img id = "Img1" , alt = "Click me" src = /content/img1.gif/>
my script would look something like
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
$('#updatePartialView'). load('#Url.Action("myAction", "myController")');
});
});
</script>
but it doesn't seem to want to work, I don't even know if it is possible .
--Update per Comment
I have a series of images on the top, and when the user click on the images the bottom half of the page refreshes with information about that picture.
---update so I wanted to try something different but it doesn't work see below
<script type = "text/javascript" src ="../../Scripts/jquery-1.5.1.js" >
$(function()
{
$("#Img1").click(function()
{
alert("I clicked this");
});
});
</script>
Just remove closing ");" in your end of javascript myFunction(). It would be working.
But I would suggest to add the onclick handler as below.
<img id = "Img1" alt = "Click me" src="">
Script:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$("#Img1").click(function(){
$('#updatePartialView').load('#Url.Action("myAction", "myController")');
});
});
</script>

Resources